最推荐的做法是在 Babel 配置中启用 @babel/preset-env 的 useBuiltIns 选项，配合 core-js 3.x 版本，让编译工具根据代码实际使用情况自动注入所需的 Polyfill，避免全量引入造成的体积浪费。

安装依赖

npm install `--save-dev` @babel/preset-env core-js@3 regenerator-runtime webpack-bundle-analyzer

配置 Babel

修改 babel.config.js 或 .babelrc 文件，注意 targets 写法及 corejs 版本匹配：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3,
      targets: ['> 1%', 'last 2 versions', 'not dead']
    }]
  ]
};

注意：如果在 package.json 中配置了 browserslist 字段，它将优先于 Babel 配置中的 targets 选项。建议统一在 package.json 中管理目标浏览器范围。

验证打包体积

集成 webpack-bundle-analyzer 可视化分析打包结果，确认 Polyfill 按需注入：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

在 package.json 中添加构建脚本，生成报告后自动打开浏览器预览：

{
  "scripts": {
    "build": "webpack `--mode` production",
    "build:report": "webpack `--mode` production `--env` report"
  }
}

运行 npm run build:report，检查 bundle 文件体积是否显著减小，并确认 core-js 相关模块是否按需加载。

常见坑与排查

• core-js 版本不匹配：配置中 corejs 字段必须与实际安装的主版本号一致（如 3）。
• 入口文件残留：删除入口文件中 import '@babel/polyfill' 代码，否则按需配置失效。
• 全局污染风险：useBuiltIns: 'usage' 会修改全局原型，开发供他人使用的库建议改用 @babel/plugin-transform-runtime。
• 配置优先级：检查是否存在 browserslist 配置覆盖了 Babel targets，导致兼容范围不符合预期。

参考文档

• @babel/preset-env 官方文档
• core-js 仓库及用法说明
• webpack-bundle-analyzer 插件文档