webpack配置optimization详解_webpack optimization-CSDN博客

本文链接：https://blog.csdn.net/qq_39290323/article/details/124108369

本文深入探讨了Webpack的配置优化，包括splitChunks的设置，如如何分割代码块，限制大小和并行请求的数量，以及runtimeChunk的配置，用于解决缓存问题。此外，还涉及了生产环境的压缩策略，如启用TerserPlugin进行多进程打包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

optimization: {
    splitChunks: {
        chunks: 'all',
        minSize: 30 * 1024, // 大于30kb的才会被分割
        maxSize: 0, // 最大没有限制
        minChunks: 1, // 要提取的chunk最少被引用1次
        maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
        maxInitialRequests: 3, // 入口js文件最大并行请求数量
        automaticNameDelimiter: '~', // 名称链接符
        name: true, //可以使用命名规则
        cacheGroups: { // 分割chunk的组
            // node_modules文件会被打包到vendors组的chunk中。--> vendors~xxx.js
            // 满足上面的公共规则，如：大小超过30kb,至少被引用一次
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10 // 优先级
            },
            default: {
                // 要提取的chunk最少被引用2次
                minChunks: 2,
                priority: -20, // 优先级
                // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用而不是重新打包模块
                reuseExistingChunk: true
            }
        }
    },
    // 将当前模块的记录其他模块的hash单独打包成一个文件：runtimechunk
    // 解决修改a文件导致b文件缓存是小的问题（若b文件中包含a文件的hash，那么a文件修改时，b文件也会修改）
    runtimeChunk: {
      name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
    }, 
     minimizer: [
      // 配置生产环境的压缩方案： js和css
      new TerserPlugin({
        parallel: true, //开启多进程打包
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        },
      }),
    ],
}