Optimization主要用于优化构建结果，比如代码压缩、拆分、去除重复模块等。在production模式下，webpack默认会启用一些优化措施，比如TerserPlugin来压缩JS，SplitChunks来拆分代码，而development模式则更注重构建速度和调试，不会进行这些优化。
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // webpack5+
const TerserWebpackPlugin = require('terser-webpack-plugin');
// 在module.exports中添加：
optimization: {
usedExports: true, // 开启tree shaking 标记
// 添加sideEffects优化（生产环境默认开启）
sideEffects: true, // 开启副作用分析，标记未使用的文件
splitChunks: { // 代码分割
chunks: 'all', // 对所有模块都进行分割
minSize: 20000, // 分割代码最小的大小
minRemainingSize: 0, // 类似于minSize，最后确保提取的文件大小不能为0
minChunks: 1, // 至少被引用的次数，满足条件才会代码分割
maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量
maxInitialRequests: 30, // 入口js文件最大并行请求数量
enforceSizeThreshold: 50000, // 超过50kb一定会单独打包（此时会忽略minRemainingSize、maxAsyncRequests、maxInitialRequests）
cacheGroups: { // 分割代码规则
defaultVendors: { // 第三方库分离，打包node_modules中的代码
test: /[\\/]node_modules[\\/]/, // 要打包的模块
priority: -10, // 权重（越大越高）
reuseExistingChunk: true, // 如果当前代码块包含已从主包中拆分出的模块，则它将重用该模块，而不是生成新的模块
},
default: { // 公共模块提取，打包其他模块
minChunks: 2, // 至少被引用2次，才会打包到default组的chunk中
priority: -20, // 权重（越大越高）
reuseExistingChunk: true, // 如果当前代码块包含已从主包中拆分出的模块，则它将重用该模块，而不是生成新的模块
}
}
},
minimizer:[ // 压缩插件
new CssMinimizerPlugin(), // 压缩css
new TerserWebpackPlugin({ // 压缩js
terserOptions: {
format: { // 去掉注释
comments: false,
},
},
extractComments: false, // 移除注释
})
]
},
mode: 'production',
