如何基于浏览器及版本优化Webpack打包产物？

当然可以！Webpack 完全具备针对不同浏览器/版本生成优化打包产物的能力，核心思路是为现代浏览器提供体积更小、无需过度转译的代码，同时为旧浏览器保留兼容版本，避免不必要的下载与运行体积浪费。下面是具体的实现方案：

1. 利用 Babel 精准控制代码转译范围 #

Babel 是 Webpack 处理 ES6+ 转译的核心工具，通过配置 @babel/preset-env 的 targets 选项，我们可以精准指定需要兼容的浏览器版本，让 Babel 只对目标浏览器不支持的特性进行转译，自动跳过已支持特性的处理。

示例 Babel 配置（babel.config.js）：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      // 指定目标浏览器范围
      targets: {
        chrome: '80',
        firefox: '75',
        safari: '13',
        ie: '11'
      },
      // 按需引入 polyfill，避免全量引入
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

配合 Webpack 的 babel-loader，就能让打包产物只包含目标浏览器所需的转译代码。

2. 生成多份差异化打包产物（现代版 + 兼容版） #

如果需要同时支持现代和旧浏览器，可以通过拆分 Webpack 配置，分别生成现代版代码（体积更小，仅转译必要特性）和兼容版代码（全量转译+polyfill）。

现代版 Webpack 配置（webpack.modern.js） #

针对支持 ES Modules 的现代浏览器，无需转译大部分 ES6+ 特性：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.modern.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: { esmodules: true }, // 匹配支持 ES Modules 的浏览器
                useBuiltIns: 'usage',
                corejs: 3
              }]
            ]
          }
        }
      }
    ]
  }
};

兼容版 Webpack 配置（webpack.legacy.js） #

针对旧浏览器（如 IE11），进行全量转译和 polyfill：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.legacy.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: { ie: '11' }, // 仅针对 IE11 兼容
                useBuiltIns: 'usage',
                corejs: 3
              }]
            ]
          }
        }
      }
    ]
  }
};

然后在 package.json 中添加打包脚本，分别生成两份产物：

{
  "scripts": {
    "build:modern": "webpack --config webpack.modern.js",
    "build:legacy": "webpack --config webpack.legacy.js",
    "build": "npm run build:modern && npm run build:legacy"
  }
}

3. 在 HTML 中自动匹配加载对应产物 #

通过 HTML 的 <script> 标签特性，让浏览器自动加载适合自己的代码：

• 现代浏览器支持 type="module"，会加载这份现代版代码；
• 旧浏览器不识别 type="module"，会忽略该标签，转而加载带有 nomodule 属性的兼容版代码。

示例 HTML 代码：

<!-- 现代浏览器加载 -->
<script type="module" src="dist/bundle.modern.js"></script>
<!-- 旧浏览器加载 -->
<script nomodule src="dist/bundle.legacy.js"></script>

4. 提取公共代码进一步优化体积 #

如果现代版和兼容版有公共代码，可以利用 Webpack 的 splitChunks 配置提取公共 chunk，避免重复打包：

// 在 Webpack 配置中添加
optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

这样公共代码会被提取到单独的文件中，进一步减少整体打包体积。

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