babel-polyfill使用与性能优化

时间: 2018-06-01阅读: 2469标签: babel

文章概览

本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。

本文所有例子可以在 笔者的github 找到。


什么是babel-polyfill

babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,比如:

  1. 全局对象:Promise、WeakMap 等。
  2. 全局静态函数:Array.from、Object.assign 等。
  3. 实例方法:比如 Array.prototype.includes 等。

此时,需要引入babel-polyfill来模拟实现这些对象、方法。


入门例子

首先,安装依赖。

npm install babel-cli --save-dev
npm install webpack@2.7 --save-dev
npm install babel-polyfill --save

创建 index.js,在最前面引入依赖babel-polyfill,接着通过webpack将依赖打包进去。

// index.js
require('babel-polyfill');

var arr = Array.from('foo');
console.log(arr);  // [ 'f', 'o', 'o' ]

webpack配置文件如下:

// webpack.config.js
var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'        
  }
};

webpack打包的时候,从输出大致可以看出引入了哪些依赖。

$ `npm bin`/webpack
Hash: 723f2ccdfa0bd8736d3c
Version: webpack 2.7.0
Time: 1080ms
  Asset    Size  Chunks                    Chunk Names
main.js  266 kB       0  [emitted]  [big]  main
 [124] (webpack)/buildin/global.js 509 bytes {0} [built]
 [125] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built]
 [126] ./index.js 96 bytes {0} [built]
 [127] ./~/babel-polyfill/~/regenerator-runtime/runtime.js 24.4 kB {0} [built]
 [128] ./~/core-js/fn/regexp/escape.js 108 bytes {0} [built]
 [314] ./~/core-js/modules/es7.string.pad-start.js 499 bytes {0} [built]
 [315] ./~/core-js/modules/es7.string.trim-left.js 219 bytes {0} [built]
 [316] ./~/core-js/modules/es7.string.trim-right.js 219 bytes {0} [built]
 [317] ./~/core-js/modules/es7.symbol.async-iterator.js 43 bytes {0} [built]
 [318] ./~/core-js/modules/es7.symbol.observable.js 40 bytes {0} [built]
 [319] ./~/core-js/modules/es7.system.global.js 144 bytes {0} [built]
 [320] ./~/core-js/modules/es7.weak-map.from.js 113 bytes {0} [built]
 [321] ./~/core-js/modules/es7.weak-map.of.js 109 bytes {0} [built]
 [322] ./~/core-js/modules/es7.weak-set.from.js 113 bytes {0} [built]
 [327] ./~/core-js/shim.js 8.18 kB {0} [built]
    + 313 hidden modules

在[327] ./~/core-js/shim.js这个依赖中,就引入了Array.from()这个方法。

require('./modules/es6.array.from');

按需加载

在前面的例子中,一个不到100字节的index.js,转码完成后,变成了259K的main.js,这从性能优化的角度来看是难以接受的。

$ ll -h index.js build/main.js 
-rw-r--r--  1 a  staff   259K  5 31 14:31 build/main.js
-rw-r--r--  1 a  staff    96B  5 31 14:25 index.js

解决方法:可以采取按需引入来优化性能。

babel-polyfill主要包含了core-js和regenerator两部分。

  • babel-polyfill:提供了如ES5、ES6、ES7等规范中 中新定义的各种对象、方法的模拟实现。
  • regenerator:提供generator支持,如果应用代码中用到generator、async函数的话用到。

优化后的代码如下:

// index.js
require('core-js/modules/es6.array.from');

var arr = Array.from('foo');
console.log(arr);  // [ 'f', 'o', 'o' ]

优化效果如下:(259K -> 17K)

$ ll -h index.js build/main.js
-rw-r--r--  1 a  staff    17K  5 31 15:01 build/main.js
-rw-r--r--  1 a  staff   112B  5 31 14:59 index.js

如果觉得逐个对象、方法按需加载比较繁琐,也可以批量按需加载。

比如,按需加载ES6中新定义的方法/对象。

require('core-js/es6');  // core-js/es6/index.js 中引入了es6相关的polyfill

或者,按需加载 ES6 的Array对象上新定义的方法。

require('core-js/es6/array');

相关链接

https://babeljs.io/docs/usage/polyfill/

原文来源:程序猿小卡的博客

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/847

深入理解Babel原理及其使用,babel把ES6转成ES5的原理是什么?

文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。Babel使用的难点主要在于理解polyfill、runtime和core-js。

不容错过的 Babel7 知识

对 Babel 的配置项的作用不那么了解,是否会影响日常开发呢?老实说,大多情况下没有什么影响。不过呢,还是想更进一步了解下,于是最近认真阅读了 Babel 的文档,外加不断编译验证

从 Babel 转译过程浅谈 ES6 实现继承的原理

都说 ES6 的 Class 是 ES5 的语法糖,那么 ES6 的 Class 是如何实现的呢?其实现继承的原理又是什么呢?不妨我们通过 Babel 转译代码的方式,看看其中有什么门道。

Babel 7 转码的正确姿势

Babel 转码的配置是每位前端童鞋在日常工作中都会遇到的。刚开始我也是在网上搜索各种配置方法,升级到 Babel 7 的时候又折腾了一把,所以决定把自己的心得和理解记录下来,希望能帮助到有需要的童鞋。

如何实现一个 Babel Macros?

可以发现实现一个 Babel macros 的过程与开发 Babel 插件的流程类似,都是对 AST 进行操作。babel-plugin-macro 只是提供一个在“外部”进行 AST 修改的方式,通过这种方式能够灵活的对 Babel 编译时进行拓展

前端中的编译原理:从零打造一个实用的 Babel 插件

说起编译原理,可能我们脑海中首先浮现的就是 “编译器” 这个词汇。维基百科上对编译器的定义是: 编译器是一种计算机程序,它会将某种编程语言写成的源代码(原始语言)转换成另一种编程语言(目标语言)

入门babel,我们需要了解些什么

说实话,我从工作开始就一直在接触babel,然而对于babel并没有一个清晰的认识,只知道babel是用于编译javascript,让开发者能使用超前的ES6+语法进行开发。自己配置babel的时候,总是遇到很多困惑,下面我就以babel@7为例

babel polyfill 的一些理解

为了支持业务中少量的es6+的高级特性,最近在研究了一下babel的垫片,现将此整理为文字,如下。简单来讲,babel解决语法层面的问题。用于将ES6+的高级语法转为ES5。

ES6之Babel的各种坑总结【转载】

自从 Babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。坑一本地安装和全局安装 、坑二编译插件、坑三babel-polyfill插件

初学 Babel 工作原理

Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的。我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!