如何让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