vue-cli3構建的項目使用compression-webpack-plugin 進行Gzip壓縮

1.安裝插件：compression-webpack-plugin

npm i -D compression-webpack-plugin

我用的插件在package.json中的版本如下：

  "devDependencies": {
    "compression-webpack-plugin": "^3.1.0",
}

2.在 vue.config.js 文件中配置 compression-webpack-plugin

const productionGzipExtensionsc = ['js', 'css']; //壓縮的文件類型
const compressionWebpackPlugin = require('compression-webpack-plugin'); //引入插件

module.exports = {
  configureWebpack: {
    plugins: [
      new compressionWebpackPlugin({
        //[file] 會被替換成原始資源。[path] 會被替換成原始資源的路徑， [query] 會被替換成查詢字符串。默認值是 "[path].gz[query]"。
        filename: '[path].gz[query]', // 提示compression-webpack-plugin@3.0.0的話asset改為filename
        //可以是 function(buf, callback) 或者字符串。對於字符串來說依照 zlib 的算法(或者 zopfli 的算法)。默認值是 "gzip"。
        algorithm: 'gzip',
        //所有匹配該正則的資源都會被處理。默認值是全部資源。
        test: new RegExp('\\.(' + productionGzipExtensionsc.join('|') + ')$'),
        //只有大小大於該值的資源會被處理。單位是 bytes。默認值是 0。
        threshold: 10240,
        //只有壓縮率小於這個值的資源才會被處理。默認值是 0.8。
        minRatio: 0.8
      })
    ] 
  }
}

3.在nginx.conf文件中加上gzip_static on;

如下所示：

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip_static on;

    server {
        listen       8462;
        server_name  localhost;

        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

4.運行vue打包命令后，dist文件夾會出現gz文件。

gzip壓縮比率在5-6倍，nginx配置了靜態gz加載后，瀏覽器也返回的是gz文件，這樣就會請求小文件而不會導致請求卡線程。

並且，因為保留了源文件，所以當我們刪除gz后，瀏覽器會自動去請求原始文件，而不會導致界面出現任何問題。

看到請求頭的Accept-Encoding:gzip和響應頭的Content-Encoding:gzip則說明使用gzip壓縮成功。

ps：還有另外一種gzip壓縮方式即服務器在線gzip壓縮。

前端不用進行任何配置，也不用webpack生成gz文件，服務器進行處理，拿nginx舉例：

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    # 開啟gzip
    gzip  on;
    
    # 設置緩沖區大小
    gzip_buffers 4 16k;
    
    #壓縮級別官網建議是6
    gzip_comp_level 6;
 
    #壓縮的類型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;


    server {
        listen       8462;
        server_name  localhost;

        location / {
            root   dist;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

上面有一些關於gzip的配置，首先是開啟gzip，設置緩沖區大小，壓縮的等級，需要壓縮的文件等（如果需要更詳細的配置，可以查看nginx的配置文檔），看下效果：

響應頭中會攜帶gzip壓縮配置，每次請求xx.js文件，服務器都會進行實時壓縮。

兩種方案的優缺點：

1、webpack打包，然后直接使用靜態的gz，缺點就是打包后文件體積太大，但是不耗服務器性能；

2、使用nginx在線gzip，缺點就是耗性能，需要實時壓縮，但是vue打包后的文件體積小。

這里可能有些同學就要問題，我想在有gz文件的時候進行靜態壓縮，不存在gz文件的時候進行在線壓縮而不是加載源文件，要怎么做呢？

簡單，兩種配置都寫上即可。

gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

首先，gzip_static的優先級高，會先加載靜態gz文件，當同目錄下不存在此文件的時候，會執行在線壓縮的命令。

既然都開啟的情況下，我們怎么區分使用了靜態加載還是在線壓縮呢？

響應頭的Content-Encoding:gzip表示gzip壓縮已經生效，而ETag中只有簡單字符表示靜態資源加載，而前面帶 W/ 表示啟動了在線壓縮。