關gzip壓縮，我有新發現

孤舟蓑翁發表於2021-04-19

1 gzip的壓縮效果是立竿見影的：

2 網站是否開啟gzip的檢視方式

2.1 開啟Chrome瀏覽器，按 F12開啟除錯皮膚

2.2 切換到network頁籤，在網路請求列表的表頭，滑鼠右鍵==>Response Headers==>Content Encoding

這一欄如果顯示gzip,證明啟用了gzip壓縮。

3. gzip壓縮方案

3.1 方案一前端打包構建時進行gzip壓縮

3.1.1 安裝外掛compression-webpack-plugin

yarn add -D compression-webpack-plugin@5.0.1

3.1.2 在webpack中配置compression-webpack-plugin

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
        plugins: [
            new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip壓縮
                test: /\.js$|\.html$|\.css$/, // 匹配檔名
                filename: '[path].gz[query]', // 壓縮後的檔名(保持原檔名，字尾加.gz)
                minRatio: 0.8, // 壓縮率小於0.8才會壓縮
                threshold: 10240, // 對超過10k的資料壓縮
                deleteOriginalAssets: false, // 是否刪除未壓縮的原始檔
            }),
        ],
    },
};

3.1.3 在Nginx中配置載入靜態的本地gz檔案

nginx 靜態壓縮需要使用 ngx_http_gzip_static_module 模組，nginx_http_gzip_static_module 模組允許傳送副檔名為 .gz 的預壓縮檔案，而不是常規檔案。預設情況下未構建此模組，應使用 --with-http_gzip_static_module 配置引數啟用它。重新編譯nginx，新增引數--with-http_gzip_static_module

./configure --with-http_gzip_static_module

然後修改 nginx.conf 配置檔案：

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

    #提高伺服器讀寫檔案效能
    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    # 開啟gzip
    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;
        }
    }
}

3.2 方案二伺服器線上gzip壓縮

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

    #提高伺服器讀寫檔案效能
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    # 開啟gzip
    gzip  on;
    
    #壓縮級別官網建議是6 數字越大壓縮的越好，也越佔用CPU時間
    #1.隨著壓縮級別的升高，壓縮比有所提高，但到了級別6後，很難再提高；
    #2.隨著壓縮級別的升高，處理時間明顯變慢；
    #3.gzip很消耗cpu的效能，高併發情況下cpu達到100%
    gzip_comp_level 6;
 
    # 壓縮的型別 html,css,xml,js,php
    # 二進位制資源：例如圖片/mp3這樣的二進位制檔案,不必壓縮；因為壓縮率比較小, 比如100->80位元組,而且壓縮也是耗費CPU資源的.
    # text/javascript是IE6,7,8才能識別的js標籤
    gzip_types text/plain  text/css application/xml application/javascript text/javascript application/x-httpd-php;
    
    #nginx用作反向代理時啟用
    #off – 關閉所有的代理結果資料壓縮
    #expired – 如果header中包含”Expires”頭資訊，啟用壓縮
    #no-cache – 如果header中包含”Cache-Control:no-cache”頭資訊，啟用壓縮
    #no-store – 如果header中包含”Cache-Control:no-store”頭資訊，啟用壓縮
    #private – 如果header中包含”Cache-Control:private”頭資訊，啟用壓縮
    #no_last_modified – 啟用壓縮，如果header中包含”Last_Modified”頭資訊，啟用壓縮
    #no_etag – 啟用壓縮，如果header中包含“ETag”頭資訊，啟用壓縮
    #auth – 啟用壓縮，如果header中包含“Authorization”頭資訊，啟用壓縮
    #any – 無條件壓縮所有結果資料
    gzip_proxied off


    # 是否在http header中新增Vary: Accept-Encoding，建議開啟
    gzip_vary on
    
    # 設定用於處理請求壓縮的緩衝區數量和大小
    gzip_buffers 4 16k;
    
    # 大於多少位元組進行壓縮,以K為單位,當值為0時，所有頁面都進行壓縮
    gzip_min_length  10
    
    # 開始壓縮的http協議版本(可以不設定,目前幾乎全是1.1協議)
    gzip_http_version 1.1;
   
    # 配置禁用gzip條件，可以不設定,目前幾乎沒有IE6,支援正則。此處表示ie6及以下不啟用gzip（因為ie低版本不支援）
    gzip_disable "MSIE [1-6]\."; 

    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;
        }
    }
}