Node.js伺服器啟用Gzip壓縮

weixin_34148456發表於2017-07-21
Node.js伺服器

Gzip是什麼

複製大神們的解釋吧：

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

Gzip壓縮率

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

3169607-30445e7a3583b8e9.png
啟用Gzip前

3169607-ad6532188d97542f.png
啟用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壓縮過:

3169607-02da52032cfff0a9.png
image.png

而圖片的沒有：
3169607-51227e50ac5f3624.png
image.png

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

node.js啟用gzip

下面說一下node的express框架如何使用gzip:
1.安裝一個compression依賴：

npm install compression

2.呼叫：

var compression = require('compression')
var app = express();

//儘量在其他中介軟體前使用compression
app.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如何開啟

nginx也支援gzip壓縮。下面為配置方法：

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

感謝閱讀！

相關文章