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實現等寬等高裁剪。

1、靜態引數

固定裁剪

location / {
    image_filter crop 1080 1080;
}

2、動態引數

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

原文地址