webpack配置optimization详解

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