polyfill 与 transform-runtime

最新推荐文章于 2024-07-16 08:47:10 发布
最新推荐文章于 2024-07-16 08:47:10 发布
阅读量273 收藏
点赞数
分类专栏： vue  文章标签： vue.js js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55551893/article/details/121851161
版权
本文探讨了在Vue.js项目中，`babel-polyfill`存在的代码冗余和不支持全局函数、实例方法的问题。由于`transform-runtime`的沙箱机制，导致异步组件加载时的性能影响。`babel-polyfill`对于大部分场景足够，但不支持的特性可能影响项目。解决方案是替换为`core-js`，通过卸载`babel-polyfill`，修改配置并引入`core-js/stable`和`regenerator-runtime/runtime`。
摘要由CSDN通过智能技术生成

首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。

　　但是，存在如下两个问题：

  1. 异步加载组件时，会产生 polyfill 代码冗余
  2. 不支持对全局函数与实例方法的 polyfill

　　两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。

　　由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。

　　不支持全局函数（如：Promise、Set、Map），Set 跟 Map 这两种数据结构应该大家用的也不多，影响较小。但是 Promise 影响可能就比较大了。

　　不支持实例方法（如：'abc'.includes('b')、['1', '2&

最低0.47元/天 解锁文章
老张头oo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Babel transform-runtime
ivenqin的博客
04-14 1027
Babel @babel/plugin-transform-runtime 本节我们来学习 @babel/plugin-transform-runtime 和 @babel/runtime 。 Babel 中使用辅助函数来实现常见功能，例如 _extend() 函数，每个编译后的文件都需要定义它所需要使用的辅助函数。但这样显然会造成很多重复，所以 Babel 把所有的辅助函数都封装于 @babel/runtime，每个编译后的文件只需要引用 @babel/runtime 即可。 @babel/runtim
babel-plugin-transform-runtime
马果的博客
05-17 5873
本文章向大家介绍babel-plugin-transform-runtime，主要包括babel-plugin-transform-runtime使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。 引言 babel默认只转换新的 JavaScript 语法，比如箭头函数、spread。 不转换新的 API，例如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的.
transform-runtime问题解决方案
weixin_39755186的博客
06-28 3442
在使用vue+webpack搭建环境时候，执行npm run dev报出如下错误： 解决方案如下： 在大多数情况下则需要安装babel-plugin-transform-runtime作为开发版的依赖（设置--save-dev） npm install --save-dev babel-plugin-transform-runtime 并且babel-runtime作为生产版本依赖（设...
什么是Polyfill？在Node.js中如何使用Polyfill？
最新发布
有我更精彩的博客
07-16 982
Polyfill是一种代码或插件，通过为浏览器提供尚未支持的原生功能，使得现代JavaScript特性可以在旧版浏览器或JavaScript引擎上运行。通俗地说，Polyfill就像一个功能补丁，它允许开发者无缝地使用最新的API，而不必担心用户的浏览器是否支持这些特性。Polyfill是Web开发过程中不可或缺的工具之一，尤其当你需要确保代码在各种浏览器和运行环境中都能正常运作时。通过本文的介绍，我们了解了Polyfill的概念和应用场景，并通过具体示例演示了如何在Node.js中使用Polyfill。
Runtime transform/runtime 转化器详解
weixin_34234829的博客
04-14 621
Runtime transform 运行时编译es6 入口文件引用作为辅助和内建，自动添加垫片到你的当前代码模块而非全局 这个插件建议放在 library/tool中 注意：实例方法，例如"foobar".includes("foo")将不能够使用，因为它将修正内置的垫片。 为什么使用它 why Babel对常用的函数使用非常小的辅助（内...
库开发者如何配置babel,@babel/plugin-transform-runtime的配置说明
weixin_42349568的博客
06-05 2253
本文主要讲解@babel/plugin-transform-runtime以及@babel/runtime的作用在上一篇文章中，已经体现出了它的第一个作用，就是把babel语法转化过程中的辅助函数删除，然后使用@babel/runtime库中的辅助函数引入的方式使用。其实它还有其他作用，以下三点是它的主要作用： 作用2和3其实是在做API转换，对内置对象进行重命名，以防止污染全局环境。在上一节，我们引入’babel-polyfill’或’core-js/stable与regenerator-runtime/
@babel/polyfill和@babel/plugin-transform-runtime区别与使用
m0_37613019的博客
08-25 1903
@babel/polyfill和@babel/plugin-transform-runtime 特别说明 本次讨论是基于webpack4 在以下版本中进行讨论 “@babel/core”: “^7.11.4” “@babel/polyfill”: “^7.10.4” “@babel/plugin-transform-runtime”: “^7.11.0” 简介 如果在开发中，使用ES6的语法，会导致一些旧版的浏览器无法运行，这时候我们就可以借助Babel这个平台来帮助我们将高版本的语法转为低版本的
Babel 踩坑总结(二) —— babel-polyfill、babel-runtime 的选择
zwkkkk1的博客
04-09 1万+
此篇来解决上篇提出的问题，官方给出babel-polyfill 和 babel-runtime 两种解决方案来解决这种全局对象或全局对象方法不足的问题 1. babel-polyfill 官方手册 babel-polyfill 会在应用中模拟一个 es2015+ 的环境，对新语法需要的新对象进行补全 使用 babel-polyfill 后，可以使用内置对象如 Promise、WeakMap，静...
什么是polyfill?
weixin_47450807的博客
02-22 4937
polyfill的概念：用于实现浏览器并不支持原生API的代码。 下面举一个例子：document.querySelectorAll()现在大多数浏览器都已经支持该方法，但是仍然存在一些比较老的版本的浏览器不支持该方法，此时如果写一个库，通过对该库的引用，从而使得浏览器可以和其他浏览器一样使用该方法，此时这个库就是polyfill。 那么我们要知道jquery不知polyfill，因为jquery主要在封装一些api,而polyfill的本质是抹平不同浏览器的api之间的差异，而不是自己实现新的api。 已
Vue 前端项目性能优化方案
weixin_50367873的博客
04-07 639
vue前端性能优化
Polyfill：兼容性的守护者
你若盛开，清风自来
03-10 2367
本文将介绍Polyfill的概念、作用以及如何使用，帮助您了解如何利用Polyfill解决浏览器兼容性问题，确保代码在多种浏览器中正常运行。🎉 Polyfill是一种重要的技术手段，它解决了浏览器兼容性问题，确保代码在多种浏览器中正常运行。通过了解Polyfill的概念、作用以及如何使用，我们可以更好地利用Polyfill提高前端项目的兼容性和性能。
polyfill的含义
前端361
09-26 3869
poly 英 [ˈpɒli]  聚酯纤维 polyfill本意是聚酯纤维填充，这里用作补丁或者兼容插件讲，用来兼容原本一些不支持的属性和方法 比如：有些旧浏览器不支持Number.isNaN方法，Polyfill就可以是这样的： if(!Number.isNaN) { Number.isNaN = function(num) { return(num !== num...
babel学习系列4-polyfill和transform-runtime的差别
weixin_34297704的博客
03-07 555
第1篇 Babel学习系列1-Babel历史 第2篇 Babel学习系列2-Babel设计组成 第3篇 Babel学习系列3-babel-preset,babel-plugin 这篇主要讲 polyfill 和 runtime 总结下, Babel 只是转换 syntax 层语法,所有需要 @babel/polyfill 来处理API兼容,又因为 polyfill 体积太大，所以通过 preset...
正确配置babel的preset-env与transform-runtime
胡聊前端的博客
03-05 757
如果是公司的项目（不是发布到npm的库）,则可以直接如下配置： # babel.config.json { "presets": [ [ "@babel/preset-env", { "targets": { "browsers": ["ie >= 11"] }, "useBuiltIns": "entry", "corejs": "3.9.1" } ] ],
babel-polyfill与babel-plugin-transform-runtime
皖林的博客
07-22 5068
babel-polyfill babel-polyfill在应用中会模拟一个es2015+的环境，所以使用了babel-polyfill后可以使用内置对象如Promise和WeakMap，静态方法如Array.from和Object.assign，实例方法如Array.prototype.includes，以及generator函数（需要提供babel-plugin-transform-rege...
Webpack-4【babel编译ES6、编译插件、全局-局部垫片】
Yesterday_Tomorrow的博客
03-02 382
一.babel编译ES6 babel-core:封装了babel编译时需要使用的API babel-loader:负责es6语法转化,webpack打包时使用babel-loader处理javascript文件 npm install babel-loader @babel/core -D npm install babel-loader @7.1.5 babel-core -D babel-loader 8.x对应 babel-core7.x babel-loader 7.x对应 babel-
Vue + ElementUI 手撸后台管理网站基本框架(一)创建项目
热门推荐
harsima的博客
09-12 6万+
创建工程目录 ajax插件选择 模拟ajax返回数据 跨域问题 优化webpack配置 增加babel-polyfill 增加路径别名 修改单页面应用根模板index.html位置 修改chunk文件名 完善各种类型的css-loader NEXT——路由篇 源码 本系列目录 创建工程目录 在开始一切的讲解前，我们先创建一个全新的工程。推荐直接使用vue官方提供的命令行...
安装 polyfill-webpack-plugin其中的http
07-12
1. 首先，请确保你已经在项目中安装了 `polyfill-webpack-plugin`，可以通过运行以下命令进行安装： ```shell npm install polyfill-webpack-plugin --save-dev ``` 2. 在你的 Webpack 配置文件中，引入 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值