Nginx網絡壓縮 CSS壓縮 圖檔壓縮 JSON壓縮

一、序言

使用Nginx作為web應用服務時，會代理如下常見檔案：

js

、

css

JSON

圖檔

等，本文提供基于Nginx内置的壓縮技術，提供網絡請求響應速度的解決方案。

1、網絡壓縮原理

網絡壓縮的原理是消耗CPU資源，減少檔案在公網傳輸的大小，提高響應速度。相比于CPU的計算資源，網絡帶寬通常較為昂貴，是以通過CPU資源置換網絡帶寬資源在實際生産中是可行的操作方案。

二、網絡壓縮

此部分所有的壓縮内容在浏覽器端都會還原，特别需要指出的是圖檔，圖檔在網絡間是壓縮狀态傳輸的，到達浏覽器後是會被還原的。

技術實作依托gzip壓縮，僅僅在伺服器與用戶端網絡傳輸時對靜态資源程序壓縮，檔案的大小在壓縮前與還原後保持不變。

（一）Web資源

1、靜态資源

前端項目中js/css檔案越來越大，對其執行壓縮處理越來越有必要。

gzip on;
gzip_comp_level 5;
gzip_min_length 10K;
gzip_types application/javascript text/css;
           

2、動态資源

通過代理後端服務傳回的JSON資料屬于動态資源的一種。對于一些較大的JSON響應體，為加快響應速度，通常也需要做壓縮處理。

gzip on;
gzip_comp_level 5;
gzip_min_length 50K;
gzip_types application/json;
           

（二）圖檔資源

1、圖檔檔案

常見的圖檔檔案格式有PNG、JPG、JPEG。

gzip on;
gzip_comp_level 5;
gzip_min_length 50K;
gzip_types image/jpeg image/gif image/png;
           

三、圖檔壓縮

Nginx能夠動态實作常見格式圖檔的壓縮與裁剪，動态減小網絡傳輸的檔案大小。圖檔壓縮分為兩類：一是等比壓縮；二是固定寬高壓縮。根據應用場景的不同也分為兩類：一是固定參數；二是動态參數。

此部分圖檔壓縮後到達浏覽器不會被還原。

（一）等比壓縮

使用關鍵詞

resize

實作等比壓縮，指定寬度或者高度即可在原尺寸圖檔的基礎上等比率壓縮圖檔。如果同時指定寬度和高度，隻有一個參數生效。

1、靜态參數

固定寬度，高度自适應

location / {
    image_filter resize 320 -;
}
           

固定高度，寬度自适應

location / {
    image_filter resize - 320;
}
           

2、動态參數

資源uri路徑與靜态資源存儲路徑保持一緻。

動态指定寬度，高度自适應

location ~* /(.+)\.(jpg|jpeg|gif|png)!(\d+)$ {
    image_filter resize  $3 -;
    image_filter_buffer  10M;
    try_files /$1.$2  /default.png;
    root   html;
}
           

（二）固定寬高壓縮

crop

實作等寬等高裁剪。

固定裁剪

location / {
    image_filter crop 1080 1080;
}
           

location ~* /(.+)\.(jpg|jpeg|gif|png)!(\d+)x(\d+)$ {
    image_filter crop  $3 $4;
    image_filter_buffer  10M;
    try_files /$1.$2  /default.png;
    root   html;
}
           

（三）預設圖檔

try_files

指令設定預設圖檔資源，如果找不到對應資源，則使用預設圖檔。

location ~* /(.+)\.(jpg|jpeg|gif|png)$ {
    try_files /$1.$2  /default.png;
    root   html;
}
           

原文位址

喜歡本文就

【♥️推薦♥️】

一下，激勵我持續創作。這個Github同樣精彩，收到您的star我會很激動。本文歸檔在專題部落格，視訊講解在B站。