不好好地引入 Babel Polyfill 怎么行
📆September 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 。