html引入babel-polyfill,【React】如何让babel-polyfill按需加载？

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

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

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

回答

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

useBuiltIns 默认为 false

根据 browserlist 是否转换新语法与 polyfill 新 API

false : 不启用polyfill, 如果 import '@babel/polyfill', 会无视 browserlist 将所有的 polyfill 加载进来

entry : 启用，需要手动 import '@babel/polyfill', 这样会根据 browserlist 过滤出 需要的 polyfill

usage : 不需要手动import '@babel/polyfill'(加上也无妨，构造时会去掉), 且会根据 browserlist + 业务代码使用到的新 API 按需进行 polyfill

类似如下方式

方式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

参考说明链接

用”transform-runtime”

npm install --save-dev transform-runtime

.babelrc

{

"plugins": [

"transform-runtime"

]

}

preact的模板是单独打包polyfills然后在模板里面加上

然后在webpack配置里面排除这个文件自动插入到html模板中

差不多就是那个意思，不知道还有什么好办法

你的意思应该是,根据用户浏览器加载polyfill, 而不是在打包阶段解决这个事情,

如果你知道你的项目用了哪些可能需要polyfill的东西, 引用第三方的polyfill服务可能比较合适

比如只用了 map,Promise 这样引用,polyfill服务会安需加载

https://cdn.polyfill.io/v2/polyfill.js?features=Array.prototype.map,Promise