不好好地引入 Babel Polyfill 怎么行

Sep 18, 2017

如果要引入 Babel Polyfill 的话,那就按需引入吧。

因为引入整个的话,有 100+ KB ;手动引入的话,有太麻烦了。😒

编译时-按需引入

思路:根据预先定义好的浏览器版本列表,引入对应的 polyfill 。

实现:babel-preset-env

// 需要 Babel 7 !!
// .babelrc.js

module.exports = {
  presets: [
    [
      'env',
      {
        modules: false,
        useBuiltIns: 'usage',
        shippedProposals: true,
        targets: {
          browsers: ['> 1%', 'last 2 versions'],
        },
      },
    ],
  ],
}
  • targets.browsers 字段是用 browserslist 这个库解析的,如果想知道具体包含了哪些浏览器,可以查看网站 browserl.ist
  • 设置 useBuiltIns 的值为 usage 的话,可以做到自动引入 polyfill 。

运行时-按需引入

然而,真正的按需引入应该是根据当前用户使用的浏览器来决定才对。

思路:根据 User-Agent 来获取当前浏览器的版本,然后引入所需的 polyfill 。

实现:polyfill.io

这种方法缺点是,无论如何都要发一次请求 ,即使我当前使用的浏览器并不需要 polyfill 。

最后

还有一种思路是这种,deploying-es2015-code-in-production-today

利用 <script type="module"></script>倒推出当前的浏览器需要哪些 polyfill 。