簡介

GZip 是一種改進web應用程序性能的技術，文件壓縮后再傳輸可以減少傳輸數據，提升傳輸速度。在Nginx服務器上開啟Gzip壓縮可以有效減少網絡傳輸流量，提升網站的訪問速度和性能。

可以作用于任何字節流的通用壓縮程序。它會在后臺記憶一些之前看到的內容，并嘗試以高效方式查找并替換重復的數據片段，從而達到較好的壓效果。但使用 gzip 壓縮的最大錯誤之一就是用 gzip 壓縮頁面中的每個資源文件。

支持資源類型

實際上，GZip 主要用于對文本類型的資源進行壓縮，例如常用見的文本資源：

• HTML 文件：text/HTML（默認壓縮）、application/xhtml+xml
• CSS 文件：text/css
• JS 文件：application/x-javascript、application/javascript、text/javascript
• JSON文件：application/json、application/geo+json、application/ld+json application/manifest+json、application/x-web-app-manifest+json
• XML 文件：application/xml、application/atom+xml、application/rdf+xml、application/rss+xml
• SVG 文件：image/svg+xml;

GZip 對基于文本的內容的資源壓縮效果最好，在壓縮較大文件時往往可實現高達 70-90% 的壓縮率，而如果對已經通過替代算法壓縮過的資源（例如，大多數圖片格式）運行 gzip，則效果甚微，甚至毫無效果。

瀏覽器支持情況

如圖所示，目前所有主流的現代瀏覽器都支持 gzip 壓縮，如下圖所示：

圖片

瀏覽器在發送請求時會自動請求該壓縮編碼的格式，如下圖的請求頭信息所示：

圖片

瀏覽器會自動在請求頭（Reqeust header s）信息中添加 Accept-Encoding: gzip 向服務器請求壓縮編碼格式的文件，gzip 壓縮編碼格式就在其中。

啟用GZip

Nginx是否支持 GZip

nginx 中的 gzip 處理模塊是：ngx_http_gzip_module。可以使用：nginx -V 命令，查看 nginx 服務器是否開啟了對 gzip 的支持模塊：

圖片

如果顯示如上圖所示的：–with-http_gzip_ static _module，就說明你的nginx服務器已經支持 gzip 了，可以開始配置 gzip 壓縮了。

未開啟GZIP壓縮

模擬網速慢未開啟壓縮。首先我們對nginx進行限速操作，限制每個連接的訪問速度為128K來建立一個比較慢的訪問場景。

修改mall.conf配置文件，進行限速操作

server {
    listen       80;
    server_name  mall.tinywan.com;
    
    limit_rate 128k; # 限制網速為128K

    location / {
        root   /usr/share/nginx/html/mall;
        index  index.html index.htm;
    }

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

對mall的前端項目mall.tinywan.com進行訪問，我們可以發現網站中有個js文件比較大，需要加載12s。

圖片

Nginx 返回請求頭信息如下

圖片

開啟GZIP壓縮

開啟Gzip模塊。在Nginx配置文件中的http塊內添加以下內容：

http {
    gzip on;
    gzip_types text/plain application/javascript;
}

這里的gzip on表示開啟gzip壓縮，gzip_types指定需要進行壓縮的文件類型，例如text/plain表示純文本文件，application/javascript表示JavaScript文件。

完整配置文件

http {

    gzip on; #開啟gzip
    gzip_disable "msie6"; #IE6不使用gzip
    gzip_vary on; #設置為on會在Header里增加 "Vary: Accept-Encoding"
    gzip_proxied any; #代理結果數據的壓縮
    gzip_comp_level 6; #gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值
    gzip_buffers 16 8k; #獲取多少內存用于緩存壓縮結果
    gzip_http_version 1.1; #識別http協議的版本
    gzip_min_length 1k; #設置允許壓縮的頁面最小字節數，超過1k的文件會被壓縮
    gzip_types application/javascript text/css; #對特定的MIME類型生效,js和css文件會被壓縮

    include /etc/nginx/conf.d/*.conf;
}

再次對mall的前端項目mall.tinywan.com進行訪問，我們可以發現js文件已經被壓縮，加載時間縮短到3.88s，提速3倍左右：

圖片

Nginx返回請求頭中添加了Content-Encoding: gzip的信息

圖片

總結

在服務器端 Nginx 啟用 gzip 壓縮，對于目前流行的單頁面應用而言，起到的前端性能優化作用的意義就更大了，因為單頁面應用的界面完全是由 JavaScript 動態繪制出來的，啟用 gzip 壓縮更快速的加載資源文件，特別是 JavaScript 腳本文件，就能盡快地顯示界面，從而提升用戶體驗。

啟用 gzip 壓縮除了優化了頁面的加載速度外，而對于公司來講，啟用 gzip 壓縮后，網站對于網絡帶寬的需求也降低了，或者說是在現有的帶寬情況下，能夠更加充分的利用帶寬資源，從長期效益來看，也可以間接的降低公司在帶寬上的運行成本。