如何让babel-polyfill按需加载？

Question

babel-polyfill可以让我们愉快的使用浏览器不兼容的es6、es7的API，但往往项目中只会用到这些API的一部分，一个babel-polyfill压缩后也有近100k的大小，这确实很恐怖。

比如我希望项目里用到Promise，打包时只加载Promise的部分代码，而非整个polyfill。

如何能让babel-polyfill按需加载呢？

Answer 1

babel 7 的 @babel/preset-env 的 useBuiltsIns提供了相对比较完美的解决方案 :

• useBuiltIns 默认为 false
  根据 browserlist 是否转换新语法与 polyfill 新 API

  1. false : 不启用polyfill, 如果 import '@babel/polyfill', 会无视 browserlist 将所有的 polyfill 加载进来
  2. entry : 启用，需要手动 import '@babel/polyfill', 这样会根据 browserlist 过滤出 需要的 polyfill
  3. usage : 不需要手动import '@babel/polyfill'(加上也无妨，构造时会去掉), 且会根据 browserlist + 业务代码使用到的新 API 按需进行 polyfill

Answer 2

类似如下方式
方式1

const Promise = require('babel-runtime/core-js/promise')

方式2

import 'core-js/es6/promise'

上面两种方式的区别，第一种是模块内引入，而第二种是全局的，你可以根据需求选择合理的方式。

you can actually pull in only the polyfills you are currently using or want to use using core-js. So instead of pulling in babel-polyfill into our app
参考说明链接

Answer 3

用"transform-runtime"

npm install --save-dev transform-runtime

.babelrc

{
    "plugins": [
        "transform-runtime"
    ]
}

Answer 4

preact的模板是单独打包polyfills然后在模板里面加上
<script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
然后在webpack配置里面排除这个文件自动插入到html模板中
差不多就是那个意思，不知道还有什么好办法

Answer 5

你的意思应该是,根据用户浏览器加载polyfill, 而不是在打包阶段解决这个事情,
如果你知道你的项目用了哪些可能需要polyfill的东西, 引用第三方的polyfill服务可能比较合适

比如只用了 map,Promise 这样引用,polyfill服务会安需加载
https://cdn.polyfill.io/v2/polyfill.js?features=Array.prototype.map,Promise