Webpack打包生产环境进行优化处理

1. 判断生产环境

javascript

复制

if (process.env.NODE_ENV === 'production') {

    // ...

}

这里首先检查环境变量NODE_ENV是否等于'production'。这是Webpack和其他Node.js应用常用的做法，用于区分开发环境和生产环境，以便在生产环境中应用更严格的优化和压缩措施。

2. 文件压缩

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表示压缩后将删除原始未压缩的文件，以节省空间。

3. 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代码优化，来减少应用体积和提高加载速度，从而提升用户体验。