環境

win10 x64
npm 6.14.13
node 14.17.3
vue 2.6.11

安裝外掛

cnpm install compression-webpack-plugin@1.1.12 -S

根目錄新建配置檔案 vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')

  module.exports = {
      configureWebpack: {
          plugins: [
              new CompressionWebpackPlugin({
                  filename: 
 
'[path].gz[query]',
                  algorithm: 'gzip',
                  test: new RegExp('\\.(js|css)$'),
                  threshold: 10240,
                  minRatio: 0.8
              })
          ]
      }
  }

Nginx配置（客戶端支援的話，直接開啟也可以壓縮）

　　 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]\.
 
";

打包成功

壓縮前

壓縮後