Gzip是什么

復制大神們的解釋吧：

GZIP最早由Jean-loup Gailly和Mark Adler創建，用于UNIX系統的文件壓縮。我們在Linux中經常會用到后綴為.gz的文件，它們就是GZIP格式的。現今已經成為Internet 上使用非常普遍的一種數據壓縮格式，或者說一種文件格式。HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。大流量的WEB站點常常使用GZIP壓縮技術來讓用戶感受更快的速度。這一般是指WWW服務器中安裝的一個功能,當有人來訪問這個服務器中的網站時,服務器中的這個功能就將網頁內容壓縮后傳輸到來訪的電腦瀏覽器中顯示出來.一般對純文本內容可壓縮到原大小的40％.這樣傳輸就快了,效果就是你點擊網址后會很快的顯示出來.當然這也會增加服務器的負載. 一般服務器中都安裝有這個功能模塊的.

Gzip壓縮率

舉個例子，通過webpack打包后的js文件比較大，雖然我們可以利用chunk功能將文件分開混淆打包，但是總體積還是不小；這時候看看利用gzip壓縮的效果：

啟用Gzip前

啟用Gzip后

對比其中三個文件前后壓縮大小：

文本類文件：

iview.min.js: 429kb -> 109kb，壓縮比74.6% base.min.js: 309kb -> 81.7kb，壓縮比73.56% style.min.css: 207kb -> 30.9kb，壓縮比85%

圖片：

圖片1: 63.2kb -> 63.2kb，壓縮比0%？

我們看到文本類文件的壓縮效果非常顯著，但是圖片體積沒變。看一下文本類的http響應頭是有gzip壓縮過:

而圖片的沒有：

這是因為一般對于圖片(png,jpg等)使用gzip的效果不好甚至恰得其反，所以一般都默認對圖片不進行gzip壓縮。

node.js啟用gzip

下面說一下node的express框架如何使用gzip:

1.安裝一個compression依賴：

npm install compression

2.調用：

var compression = require('compression')var app = express();//盡量在其他中間件前使用compressionapp.use(compression());

基本的使用就是這樣就ok了，另外如果想只對某些請求使用此功能，可以使用它的過濾方法：

app.use(compression({filter: shouldCompress}))function shouldCompress (req, res) { if (req.headers['x-no-compression']) {  // 這里就過濾掉了請求頭包含'x-no-compression'  return false } return compression.filter(req, res)}

其他的功能請參考compression的文檔。

另外附上nginx的配置

#on為啟用，off為關閉gzip on;#設置允許壓縮的頁面最小字節數，頁面字節數從header頭中的Content-Length中進行獲取。默認值是0，不管頁面多大都壓縮。建議設置成大于1k的字節數，小于1k可能會越壓越大。gzip_min_length 1k;#獲取多少內存用于緩存壓縮結果，‘4 16k'表示以16k*4為單位獲得gzip_buffers 4 16k;#gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值gzip_comp_level 5;#對特定的MIME類型生效,其中'text/html'被系統強制啟用gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

簡單解釋下參數

1) gzip

語法：gzip on/off
默認值：off
作用域：http, server, location
說明：開啟或者關閉 gzip 模塊，這里使用 on 表示啟動

2) gzip_min_length

語法：gzip_min_length length
默認值：gzip_min_length 0
作用域：http, server, location
說明：設置允許壓縮的頁面最小字節數，頁面字節數從header頭中的Content-Length中進行獲取。默認值是0，不管頁面多大都壓縮。建議設置成大于1k的字節數，小于1k可能會越壓越大。|

3) gzip_buffers

語法: gzip_buffers number size
默認值: gzip_buffers 4 4k/8k
作用域: http, server, location
說明：設置系統獲取幾個單位的緩存用于存儲gzip的壓縮結果數據流。4 16k 代表以 16k 為單位，按照原始數據大小以 16k 為單位的4倍申請內存。

4) gzip_comp_level

語法: gzip_comp_level 1..9
默認值: gzip_comp_level 1
作用域: http, server, location
說明：gzip壓縮比，1 壓縮比最小處理速度最快，9 壓縮比最大但處理最慢（傳輸快但比較消耗cpu）。這里設置為 5。
5) gzip_types

語法: gzip_types mime-type [mime-type ...]
默認值: gzip_types text/html
作用域: http, server, location
說明：匹配MIME類型進行壓縮，（無論是否指定）"text/html" 類型總是會被壓縮的。這里設置為 text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php。