1 安装插件 npm install -D  compression-webpack-plugin

2 配置插件 配置中出现版本问题 我最后使用了

  "compression-webpack-plugin": "5.0.1",

const CompressionPlugin  = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;


const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
    if (IS_PROD) {
      config.plugin('compressionPlugin').use(new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          minRatio: 0.8,
          test:productionGzipExtensions, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: true  // 不删除源文件
        }))
    }

3 服务端配置（不配置就会失效找不到文件 实测）http模块下插入   然后nginx -s reload

  #gzip  on;
    gzip on; # 开启Gzip
    gzip_static on; # 开启静态文件压缩
    gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";

4 查看效果

 

 

 

压缩后