npm i compression-webpack-plugin@5.0.1

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

// 判斷配置文件是否開(kāi)啟了gzip加速
if (config.build.productionGzip) {
  // 引入壓縮文件的組件，該插件會(huì)對(duì)生成的文件進(jìn)行壓縮，生成一個(gè).gz文件
  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]', // 目標(biāo)文件名
      algorithm: 'gzip',  // 使用gzip壓縮
      test: new RegExp( // 滿足正則表達(dá)式的文件會(huì)被壓縮
        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
      ),
      threshold: 10240, // 資源大于10240=10KB時(shí)會(huì)被壓縮
      minRatio: 0.8,
      deleteOriginalAssets: false, // 是否刪除原資源
    })
  )
}

npm run build

# on為啟用，off為關(guān)閉
gzip on;
# Nginx的動(dòng)態(tài)壓縮是對(duì)每個(gè)請(qǐng)求先壓縮再輸出，這樣造成虛擬機(jī)浪費(fèi)了很多cpu，解決這個(gè)問(wèn)題可以利用nginx模塊Gzip Precompression，這個(gè)模塊的作用是對(duì)于需要壓縮的文件，直接讀取已經(jīng)壓縮好的文件(文件名為加.gz)，而不是動(dòng)態(tài)壓縮，對(duì)于不支持gzip的請(qǐng)求則讀取原文件
gzip_static on;
# 設(shè)置允許壓縮的頁(yè)面最小字節(jié)數(shù)，頁(yè)面字節(jié)數(shù)從header頭中的Content-Length中進(jìn)行獲取。默認(rèn)值是0，不管頁(yè)面多大都?jí)嚎s。建議設(shè)置成大于1k的字節(jié)數(shù)，小于1k可能會(huì)越壓越大。
gzip_min_length 1k;
# 獲取多少內(nèi)存用于緩存壓縮結(jié)果，‘4 16k'表示以16k*4為單位獲得
gzip_buffers 4 32k;
# 識(shí)別http協(xié)議的版本,早起瀏覽器可能不支持gzip自解壓,用戶會(huì)看到亂碼
gzip_http_version 1.1;
# gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值;
gzip_comp_level 2;
# 對(duì)特定的MIME類型生效,其中'text/html'被系統(tǒng)強(qiáng)制啟用
gzip_types text/plain application/x-javascript text/css application/xml;
# 啟用應(yīng)答頭"Vary: Accept-Encoding"
gzip_vary on;
# IE5.5和IE6 SP1使用msie6參數(shù)來(lái)禁止gzip壓縮 )指定哪些不需要gzip壓縮的瀏覽器(將和User-Agents進(jìn)行匹配),依賴于PCRE庫(kù)
gzip_disable "MSIE [1-6].";