- 判断生产环境
javascript
复制
if (process.env.NODE_ENV === 'production') {
// ...
}
这里首先检查环境变量NODE_ENV是否等于'production'。这是Webpack和其他Node.js应用常用的做法，用于区分开发环境和生产环境，以便在生产环境中应用更严格的优化和压缩措施。
- 文件压缩
javascript
复制
config.plugin('compressionPlugin').use(
new CompressionWebpackPlugin({
test: /\.(js|css|json|ico|svg|xml|html)$/, // 匹配文件格式
algorithm: 'gzip', // 使用gzip算法
threshold: 5120, // 对超过5k的数据进行压缩
minRatio: 0.7, // 压缩比需达到0.7
deleteOriginalAssets: true, // 压缩后删除源文件
})
);
CompressionWebpackPlugin插件用于在Webpack打包过程中压缩资源文件，以减少传输大小和加快加载速度。
test属性定义哪些类型的文件需要被压缩，这里包括.js、.css、.json、.ico、.svg、.xml和.html文件。
algorithm指定压缩算法为gzip。
threshold设置只有大于5KB的文件才会被压缩，以避免对小型文件的不必要压缩。
minRatio设定压缩后文件大小至少应减少到原大小的70%，以确保压缩效果。
deleteOriginalAssets设置为true表示压缩后将删除原始未压缩的文件，以节省空间。
- JS文件处理
javascript
复制
config.plugin('uglifyJs').use(UglifyJsPlugin, [
{
uglifyOptions: {
warnings: false, // 不显示警告
compress: {
drop_debugger: true, // 移除debugger语句
drop_console: true, // 移除console.*函数
pure_funcs: 'console.log', // 移除console.log的引用
},
},
parallel: true, // 多进程并行运行
extractComments: true, // 抽取注释
},
]);
UglifyJsPlugin用于压缩和优化JavaScript文件。
uglifyOptions中设置了压缩选项，包括不显示警告、压缩时移除debugger语句和console.*函数（如console.log），以及移除对console.log的直接引用。
parallel设置为true允许插件使用多进程并行压缩，以加快构建速度。
extractComments设置为true表示提取注释到单独的文件中，这在某些情况下很有用，比如保留版权信息或注释供后续调试。
综上所述，这段代码通过在生产环境中应用文件压缩和JavaScript代码优化，来减少应用体积和提高加载速度，从而提升用户体验。