使用CompressionPlugin压缩Webpack Bundle的技术咨询及配置代码

看起来你已经引入了CompressionPlugin，但还没在plugins数组里配置它的实例，而且你的UglifyJsPlugin代码也没写完。我来帮你补全并配置好完整的压缩相关配置：

首先，先补全UglifyJsPlugin（如果你使用的是Webpack 3及以下版本，Webpack 4+建议使用TerserPlugin，不过先按你当前的代码结构来），然后添加CompressionPlugin的具体配置，让它生成gzip格式的压缩包：

完整的Webpack配置代码 #

const path = require('path');
const webpack = require('webpack');
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  entry: ['babel-polyfill', './src/client.js'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,'public')
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    // 补全UglifyJsPlugin（Webpack 3及以下适用）
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false, // 关闭压缩警告
        drop_console: true // 移除console.log等控制台输出
      },
      sourceMap: false // 不需要生成sourceMap
    }),
    // 配置CompressionPlugin生成gzip压缩文件
    new CompressionPlugin({
      test: /\.js$|\.css$/, // 匹配要压缩的文件类型
      threshold: 8192, // 文件大小超过8KB才进行压缩
      algorithm: 'gzip', // 使用gzip压缩算法
      deleteOriginalAssets: false // 保留原文件，方便回退或者兼容不支持gzip的环境
    })
  ]
};

关键配置说明 #

• UglifyJsPlugin：负责混淆压缩JS代码，移除冗余代码和控制台输出，减少bundle体积。如果你的Webpack版本是4+，建议替换为TerserPlugin（Webpack 4+内置，无需额外安装），配置方式类似。
• CompressionPlugin：生成对应的gzip压缩文件，之后你可以在服务器配置（比如Nginx、Apache）中开启gzip静态文件服务，让浏览器加载更小的压缩包，提升加载速度。

注意事项 #

1. 确保你已经正确安装了compression-webpack-plugin：

npm install compression-webpack-plugin --save-dev

2. 如果使用Webpack 4+，可以直接设置mode: 'production'，Webpack会自动启用代码压缩，你只需要添加CompressionPlugin来生成gzip文件即可。

内容的提问来源于stack exchange，提问作者publicArt33