文章首發於筆者的個人部落格
文章概覽
本文主要內容包括：什麼是babel-polyfill，如何使用，如何通過按需載入進行效能優化。
本文所有例子可以在 筆者的github 找到。
什麼是babel-polyfill
babel只負責語法轉換，比如將ES6的語法轉換成ES5。但如果有些物件、方法，瀏覽器本身不支援，比如：
- 全域性物件：Promise、WeakMap 等。
- 全域性靜態函式：Array.from、Object.assign 等。
- 例項方法：比如 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');