nginx gzip 動態靜態壓縮詳解

2023-03-21 06:02:52

前言

gzip壓縮是解決編譯產物體積過大、縮短靜態資源請求時長的常用手段之一，我們在網站上經常能看到 Content-Encoding: gzip 這個 http 響應頭，表示內容使用 gzip 壓縮；gzip壓縮分為動態壓縮與靜態壓縮，下面淺淺的介紹下這兩種方式以及使用；

動態壓縮

動態壓縮實際上就是由nginx伺服器對編譯造物進行壓縮，需要在nginx.conf的http、https模組中開啟下面的設定：

    gzip  on; # 開啟gizo壓縮
    gzip_min_length 1k; # gizp壓縮起點，檔案大於1k才進行壓縮
    gzip_comp_level 6; # 壓縮級別 數位越大壓縮得越小 但是越耗效能 根據實際情況而定
    gzip_proxied any; # nginx做為反向代理時啟用, 詳細見官方檔案：http://nginx.org/en/docs/http/ngx_http_gzip_module.html#gzip_proxied
    gzip_vary on; # 是否在http header中新增Vary: Accept-Encoding
    gzip_buffers 16 8k; # 設定壓縮所需要的緩衝區大小，以8k為單位，案例中則申請16*4k的緩衝區
    gzip_http_version 1.1; # http的版本
    gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; # 檔案型別

更改完設定，重啟nginx伺服器，檢視靜態資源響應頭，出現Content-Encoding: gzip ****則代表開啟成功；

靜態壓縮

動態壓縮是在伺服器上進行的，壓縮級別越高越耗效能，靜態壓縮就是為了解決這個問題而生的，開啟靜態壓縮後，nginx會自動尋找.gz字尾的檔案，如果沒有則返回原始檔；於是乎，我們就可以在前端構建的時候進行gzip壓縮；

以vite為例，我們需要引入vite-plugin-compression外掛，並且在vite.config.js中按照下面的方式設定；

    import viteCompression from 'vite-plugin-compression'; // gzip
    plugins: [ viteCompression() ]

外掛支援自定義，主要設定如下

    verbose: true, // 是否在控制檯輸出壓縮結果 這裡我們開啟檢視壓縮的效果
    disable: false, // 是否禁用
    threshold: 10240, // 大於這個值才進行壓縮 單位為b
    algorithm: 'gzip', // 演演算法 除了gzip還有 ['brotliCompress' ,'deflate','deflateRaw']
    ext: '.gz', // 輸出的字尾

引入外掛後編譯，我們即可看見編譯檔案中會多出一些.gz結尾的檔案，這些便是壓縮的產物，檢視編譯輸出，我們可以看到

    dist/D:/code/vue/mine/waylon-blog/packages/waylon-blog-pages/assets/index-d023f1e5.css.gz                                  598.32kb / gzip: 67.81kb

一個598.32kb的css檔案經過壓縮之後大小變成了67.81kb；

將靜態資源部署到伺服器上，在nginx.conf中開啟下面的設定，nginx會自動去尋找.gz結尾的檔案，直接返回給使用者端，這就是所謂的靜態壓縮；

    gzip_static on

坑點！！！

1，nginx對靜態壓縮的檔案要求較高，必須與原檔案同時生成，如果不是同時生成的，那麼nginx將無法進行匹配（對於這一點，筆者在引入外掛後原始碼未變更，導致gz檔案與原檔案時間不一致，導致靜態壓縮不生效）；

官網原話：

The files can be compressed using the gzip command, or any other compatible one. It is recommended that the modification date and time of original and compressed files be the same.

2，nginx預設是沒有安裝ngx_http_gzip_static_module靜態壓縮模組的，需手動開啟，開啟方法這裡不贅述，直接上指令：

找到安裝路徑的configure檔案以後，就在這個資料夾下，執行如下命令

./configure  --with-http_gzip_static_module

等待執行完畢以後就是執行make指令

make

動靜結合

實際應用中我們通常會採取靜態壓縮+動態壓縮結合的方式來處理我們的靜態資源，靜態壓縮的優先順序會高於動態壓縮，並不是說壓縮的越到小越好，如果已經進行過靜態壓縮的檔案就沒有必要再進行動態壓縮了，因為這樣浪費效能，得不償失，所以動態壓縮的gzip_min_length這個設定尤為重要，能讓我們避免一些無謂的操作；

經過上面一系列操作之後，可以用站長工具測試下壓縮的效果，直接將靜態資源的連線複製進去即可：https://tool.chinaz.com/Gzips/?q=c.nxw.so

如圖

檔案參考：

http://nginx.org/en/docs/http/ngx_http_gzip_static_module.html

http://nginx.org/en/docs/http/ngx_http_gzip_module.html

以上就是nginx gzip 動態靜態壓縮詳解的詳細內容，更多關於nginx gzip動靜態壓縮的資料請關注it145.com其它相關文章！

nginx gzip 動態靜態壓縮詳解

目錄

前言

動態壓縮

靜態壓縮

動靜結合

熱門文章