babel7-按需加載polyfill

babel7

babel7發佈了。
在升級到 Babel 7 時須要注意幾個重大變化：

1. 移除對 Node.js 6 以前版本的支持；
2. 使用帶有做用域的 @babel 命名空間，以防止與官方 Babel 包混淆；
3. 移除年度預設，替換爲 @babel/preset-env；
4. 使用選擇性 TC39 個別提案替換階段提案；
5. TC39 提議插件如今是 -proposal，而不是 -transform；
6. 爲某些面向用戶的包（例如 babel-loader、@babel/cli 等）在 @babel/core 中引入peerDependency。

官方提供了一個工具babel-upgrade，對於老項目，只須要執行：npx babel-upgrade --write --install
具體看https://github.com/babel/babel-upgrade

useBuiltIns：usage

babel的polyfill老是比較大，會影響一些性能，並且也會有一些沒用的polyfill，怎麼減小polyfill的大小呢？
babel7提供了useBuiltIns的按需加載：usage。
配置中設置useBuiltIns：usage，babel就會自動把所需的polyfill加載進來，不須要手動import polyfill文件。
配置如：

{
    "presets": [
      "@babel/preset-react",
      ["@babel/env", {
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        },
        "useBuiltIns": "usage",
        "debug": true
      }]
    ],
    "plugins": ["@babel/transform-runtime"]
  }

babel提供的@babel/env全面替換es2015，stage插件。（若是用到stage的某些插件須要自行引入。我的感受stage用起來太不方便了）。
以前的babel-preset-env/babel-preset-react全都更名爲@babel/xxx，若是在babel7你還按以前的寫法，會報錯：
Error: Plugin/Preset files are not allowed to export objects, only functions.

效果

看下useBuiltIns：usage的效果。"debug"選項開到true，能夠看到打包的文件。

我用es6摘抄了一些語法，用來測試編譯：

const a = Object.assign({}, { a: 1 });
console.log(a);
function timeout(ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}

async function asyncPrint(value, ms) {
    await timeout(ms);
    console.log(value);
}

let s = Symbol();

typeof s;

class ColorPoint {
    constructor(x, y, color) {
      this.color = color;
    }
  
    toString() {
      return this.color + ' ' + super.toString(); // 調用父類的toString()
    }
  }

asyncPrint('hello world', 50);

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
  
var hw = helloWorldGenerator();

console.log(hw.next());

babel編譯以後，能夠看到加載的polyfill只加載了 es6.object.assign，es6.promise， es6.symbol，es7.symbol.async-iterator ， regenerator-runtime。

babel是怎麼知道咱們須要哪些polyfill的？

根據咱們填的"targets"，babel會去查用到的api，當前的target環境支持什麼不支持什麼，不支持的才加polyfill。

能夠看到咱們編譯後的文件已經加了polyfill。

文件大小和性能都有不少提升。

useBuiltIns：entry

useBuiltIns：entry就沒有那麼智能了，他會根據target環境加載polyfill，他須要手動import polyfill，不能屢次引入。
@babel/preset-env會將把@babel/polyfill根據實際需求打散，只留下必須的。作的只是打散。僅引入有瀏覽器不支持的polyfill。這樣也會提升一些性能，減小編譯後的polyfill文件大小。

main.js須要引入polyfill。import '@babel/polyfill';。
能夠看到效果。我只截了部分polyfill依賴。

編譯後的文件引入了一堆polyfill。

最佳實踐

只用polyfill不是最完美的方案。
polyfill會額外引入一些函數，好比：

由於polyfill沒有babel-runtime的helper函數，在編譯async函數的時候，會引入以上的代碼asyncGeneratorStep，_asyncToGenerator。
若是你每一個文件都用到了async，那麼冗餘的代碼將會很大。

babel-runtime

最佳方案就是在用polyfill的同時，再用babel-runtime。
babel-runtime會把asyncGeneratorStep,_asyncToGenerator等函數require進來。從而減少冗餘。
這得益於babel-runtime的helper函數。
因此最佳的配置是polyfill+babel-runtime。
若是用了react能夠加@babel/preset-react。

{
    "presets": [
      "@babel/preset-react",
      ["@babel/env", {
        "targets": {
          "browsers": ["last 2 versions", "ie 11"]
        },
        "useBuiltIns": "usage"
      }]
    ],
    "plugins": ["@babel/transform-runtime"]
  }

能夠看到，_asyncToGenerator2已被require。