以清晰的方式理解webpack.config.js：optimization篇

2023-10-27 14:12:51

优化配置

webpack.config.js中的optimization属性允许您自定义webpack的优化设置，以提高构建性能并减小生成的代码体积。optimization属性包含以下主要参数：

splitChunks ：此参数用于配置代码拆分策略，允许您将代码块拆分成多个更小的块，以提高并行加载和缓存效率。
runtimeChunk ：此参数指定是否将webpack运行时代码拆分成一个单独的块，这有助于减少公共代码的大小并提高加载速度。
flagPlugin ：此参数用于启用标志插件，该插件可以将代码中的字符串替换为较小的标志值，从而减小代码体积。
minimize ：此参数用于启用代码压缩，可以减少代码体积并提高加载速度。
minify ：此参数与minimize类似，但使用更高级的压缩算法，可以进一步减小代码体积。
TerserPlugin ：此插件用于执行代码压缩，它提供了更细粒度的压缩控制选项。
optimization.splitChunks ：此对象用于配置代码拆分策略的具体细节，例如块的最小大小、最大大小、缓存组等。
optimization.minimize ：此布尔值用于启用或禁用代码压缩。
optimization.minimizer ：此数组用于配置要使用的压缩器，它可以包含TerserPlugin和其他自定义压缩器。

使用示例

以下是一个使用optimization属性配置webpack的示例：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 50000,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
    runtimeChunk: true,
    flagPlugin: true,
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};