首頁  >  文章  >  web前端  >  教你如何在Node.js中開啟Gzip壓縮方法

教你如何在Node.js中開啟Gzip壓縮方法

巴扎黑
巴扎黑原創
2017-08-12 16:31:331719瀏覽

開啟網站的gzip 壓縮功能,通常可以高達70%,也就是說,如果你的網頁有30K,壓縮之後就變成9K, 對於大部分網站,顯然可以明顯提高瀏覽速度(註:需要瀏覽器支援)。

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();

//尽量在其他中间件前使用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的設定

##

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

以上是教你如何在Node.js中開啟Gzip壓縮方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn