如何减小babel-polyfill的体积（压缩后为150KB）？

嘿，我完全懂你的痛点——直接引入整个babel-polyfill确实会把所有兼容代码一股脑塞进bundle里，导致体积超标。不过不用手动一个个加特定polyfill，我们可以通过正确配置Babel和Webpack实现自动按需引入（也就是你说的摇树优化），具体方案如下：

1. 弃用babel-polyfill，改用core-js按需引入 #

babel-polyfill已经被官方弃用，现在推荐直接基于core-js做polyfill。首先删掉主JS文件里的import 'babel-polyfill'，然后修改你的Babel配置（.babelrc或babel.config.js）：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 核心配置：自动扫描代码中用到的ES特性，只引入需要的polyfill
      "corejs": 3, // 指定core-js版本，需先安装：npm install core-js@3 --save
      "targets": { // 明确支持的浏览器范围，避免为过时浏览器打包冗余代码
        "browsers": ["> 1%", "last 2 versions", "not dead"]
      },
      "modules": false // 禁止Babel把ES模块转成CommonJS，确保Webpack能正常摇树
    }],
    "@babel/preset-react"
  ]
}

这个配置会让Babel在编译时自动识别代码中用到的ES6+特性，只打包对应的polyfill，而非整个core-js。

2. 确保Webpack摇树优化正常生效 #

Webpack 4在mode: 'production'下默认开启摇树优化，但有个关键前提：代码和依赖必须使用ES模块语法（import/export），不能是CommonJS（require）。刚才在Babel配置里设置modules: false，就是为了保留ES模块语法，让Webpack能识别并删除未使用的代码。

3. 用@babel/plugin-transform-runtime进一步压缩体积（可选） #

如果项目里存在大量重复的polyfill代码，可以用这个插件把它们抽成共享模块，减少打包体积。先安装依赖：

npm install @babel/plugin-transform-runtime @babel/runtime-corejs3 --save-dev

然后在Babel配置中添加插件：

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

这种方式不会污染全局作用域，适合类库开发；如果是普通应用，前面的useBuiltIns: 'usage'已经足够高效。

4. 排查第三方依赖的冗余polyfill #

用你正在用的source-map-explorer仔细分析bundle，有些第三方库可能自带了polyfill（比如部分老版UI组件库）。如果发现这类情况，可以查看该库的文档，看看有没有关闭内置polyfill的配置，或者考虑替换为更轻量化的替代库。

按照这些步骤配置后，core-js的体积会大幅下降，完全不需要手动引入单个polyfill。

内容的提问来源于stack exchange，提问作者Vololodymyr