摘要：與簡(jiǎn)單來(lái)說包括了和轉(zhuǎn)義和的包。雖然實(shí)際壓縮已經(jīng)能夠優(yōu)化掉大部分體積的，但是對(duì)于一些最新瀏覽器版本來(lái)說，任何的都是浪費(fèi)資源的。以服務(wù)端渲染的方式從請(qǐng)求中獲取到的信息，然后返回對(duì)應(yīng)的。

使用@babel/polyfill可以讓你在任何es2015+的環(huán)境中編寫代碼，而不需要擔(dān)心兼容性問題。它會(huì)在全局變量上添加一些類似于原生的方法。但是webpack一直以來(lái)配置都特別復(fù)雜，直到webpack4才開始做0配置。項(xiàng)目中如果需要webpack的配置可能都是ctrl+c ctrl+v,沒有及時(shí)去更新，會(huì)對(duì)polyfill有一些誤解，比如說，項(xiàng)目中會(huì)同時(shí)出現(xiàn)babel-plugin-transform-runtime和babel-polyfill，在已經(jīng)使用了babel-polyfill的基礎(chǔ)上還是會(huì)擔(dān)心使用新語(yǔ)法帶來(lái)的問題。這篇文章將會(huì)解答一些與babel-polyfill相關(guān)的問題。

簡(jiǎn)單來(lái)說polyfill包括了core-js和regenerator-runtime(轉(zhuǎn)義async和await的包)。

而且babel7.4.0開始@babel/polyfill改成直接引入core-js和regenerator-runtime了

As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

import "core-js/stable";
import "regenerator-runtime/runtime";

preset-env中我們需要關(guān)注以下兩個(gè)屬性

targets可以設(shè)置polyfill引入哪些方法的轉(zhuǎn)義，因?yàn)?b>preset-env有一個(gè)內(nèi)置的json文件,可以根據(jù)用戶設(shè)置過濾所需要polyfill的方法

// corejs2-built-ins.json
    {
    "es6.array.copy-within": {
        "chrome": "45",
        "edge": "12",
        "firefox": "32",
        "safari": "9",
        "node": "4",
        "ios": "9",
        "samsung": "5",
        "opera": "32",
        "electron": "0.35"
      },
      "es6.array.every": {
        "chrome": "5",
        "opera": "10.10",
        "edge": "12",
        "firefox": "2",
        "safari": "3.1",
        "node": "0.10",
        "ie": "9",
        "android": "4",
        "ios": "6",
        "phantom": "2",
        "samsung": "2.1",
        "electron": "1.1"
      },
    ……
    }

// 根據(jù)項(xiàng)目需要兼容的最低版本
{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}

useBuiltIns有兩個(gè)特別有用的屬性，usage和entry,使用兩個(gè)屬性都是直接引用core-js對(duì)應(yīng)的包。

entry的用法：項(xiàng)目中import "@babel/polyfill";persets的options中使用useBuiltIns: "entry",配合targets選項(xiàng)，只import最低版本所需要的方法墊片

usage的用法：只需要在persets的options中使用useBuiltIns: "usage"即可將所有項(xiàng)目中用到所需要在最低瀏覽器版本不兼容的方法墊片，例如 includes 方法就會(huì)自動(dòng)import "core-js/modules/es6.string.includes";`

//demo
// index.js
console.log("test123".includes("test"));
// webpack.config.js
use: {
    loader: "babel-loader",
    options: {
        presets: [
            [
                "@babel/preset-env",
                {
                    targets: {
                        chrome: "58",
                        ie: "11"
                    },
                    useBuiltIns: "usage"
                }
            ]
        ]
    }
}

因?yàn)?includes 在 ie11 中不兼容，打包結(jié)果：

不使用@babel/preset-env,打包后文件 _900 多 bytes 不到 1kb_，不能兼容低版本瀏覽器

使用preset-env+useBuiltIns: "usage"，babel 識(shí)別到使用了 includes 方法，加入 polyfill 的方法有[ "es6.string.includes", "es7.array.includes" ]，打包后文件為 6.56kb

使用preset-env+useBuiltIns: "entry"，并且手動(dòng) import @babel/polyfill(使用 useBuiltIns webpack 都會(huì)建議不需要手動(dòng) import polyfill，如果它檢測(cè)到用戶已經(jīng) import 了會(huì)提示 useBuiltIns 選用 entry 屬性)，polyfill 的幾十個(gè)方法，也就是按照 targets 的配置將所有需要 polyfill 方法都打包進(jìn)來(lái)，打包后文件為 76.7kb

{
  "es6.array.copy-within",
  "es6.array.fill",
  "es6.array.find",
  "es6.array.find-index",
  "es7.array.flat-map",
  "es6.array.from",
  "es7.array.includes",
  ……
}

只使用 babel-loader+@babel/preset-env，打包文件大小為 86.3kb

因此，如果項(xiàng)目本身是有兼容性要求的話，一般都會(huì)使用 babel-loader 做兼容，因?yàn)楹艹Ｒ姷?array.from 也是要做 polyfill 的，加上 preset-env + useBuiltIns 按需加載使用一些新語(yǔ)法其實(shí)不需要太擔(dān)心包大小的問題，也不需要手動(dòng) import @babel/polyfill

雖然在babel-preset-env官方文檔中看到usage還是experiment狀態(tài)，但是可以在vue-cli的源碼看到默認(rèn)打包的app的presets配置里useBuiltIns是usage，所以可以放心的用（其實(shí)babel6的時(shí)候usage就已經(jīng)是experiment，babel7也還是）

/vue-cli/packages/@vue/babel-preset-app/index.js

需要注意的是如果你使用的不是TC39 stage4的提案，你還是需要自己手動(dòng)去設(shè)置babel-plugin,preset-env不會(huì)幫你引入其他stage的語(yǔ)法墊片

如果有長(zhǎng)時(shí)間使用過webpack，一定不會(huì)對(duì)babel-plugin-transform-runtime這個(gè)插件陌生,大家都有做兼容的環(huán)境的作用，甚至有些項(xiàng)目還會(huì)看到同時(shí)使用babel-polyfill和babel-plugin-transform-runtime，這種做法貌似在babel-preset-env出來(lái)之前是有一定道理的。

實(shí)際上transform-runtime的轉(zhuǎn)換是非侵入性的，也就是它不會(huì)污染你的原有的方法，比如掛在Array原型上的includes方法就只能使用babel-polyfill

transform-runtime的使用場(chǎng)景應(yīng)該是庫(kù)，遇到需要轉(zhuǎn)換的方法它會(huì)另起一個(gè)名字，否則會(huì)直接影響使用庫(kù)的業(yè)務(wù)代碼，平常的項(xiàng)目使用babel-polyfill即可。

雖然presets-env+實(shí)際壓縮已經(jīng)能夠優(yōu)化掉大部分體積的polyfill，但是對(duì)于一些最新瀏覽器版本來(lái)說，任何的polyfill都是浪費(fèi)資源的。

這時(shí)候polyfill.io能夠解決這個(gè)問題。polyfill.io以服務(wù)端渲染的方式從請(qǐng)求中獲取到useragent的信息，然后返回對(duì)應(yīng)的polyfill。但據(jù)說是因?yàn)闉g覽器版本太多，國(guó)內(nèi)還有套殼的360/qq等瀏覽器，ua要是判斷失誤沒有其他回退的方案，因此沒有辦法廣泛應(yīng)用起來(lái)。