快捷導(dǎo)航

Node.js服務(wù)器開啟Gzip壓縮教程

更新時(shí)間：2017年08月11日 08:45:11 作者：doterlin

開啟網(wǎng)站的 gzip 壓縮功能，通?？梢愿哌_(dá)70%，也就是說(shuō)，如果你的網(wǎng)頁(yè)有30K，壓縮之后就變成9K，對(duì)于大部分網(wǎng)站，顯然可以明顯提高瀏覽速度（注：需要瀏覽器支持）。

Gzip是什么

復(fù)制大神們的解釋吧：

GZIP最早由Jean-loup Gailly和Mark Adler創(chuàng)建，用于UNIX系統(tǒng)的文件壓縮。我們?cè)?/span>Linux中經(jīng)常會(huì)用到后綴為.gz的文件，它們就是GZIP格式的?，F(xiàn)今已經(jīng)成為Internet 上使用非常普遍的一種數(shù)據(jù)壓縮格式，或者說(shuō)一種文件格式。HTTP協(xié)議上的GZIP編碼是一種用來(lái)改進(jìn)WEB應(yīng)用程序性能的技術(shù)。大流量的WEB站點(diǎn)常常使用GZIP壓縮技術(shù)來(lái)讓用戶感受更快的速度。這一般是指WWW服務(wù)器中安裝的一個(gè)功能,當(dāng)有人來(lái)訪問(wèn)這個(gè)服務(wù)器中的網(wǎng)站時(shí),服務(wù)器中的這個(gè)功能就將網(wǎng)頁(yè)內(nèi)容壓縮后傳輸?shù)絹?lái)訪的電腦瀏覽器中顯示出來(lái).一般對(duì)純文本內(nèi)容可壓縮到原大小的40％.這樣傳輸就快了,效果就是你點(diǎn)擊網(wǎng)址后會(huì)很快的顯示出來(lái).當(dāng)然這也會(huì)增加服務(wù)器的負(fù)載. 一般服務(wù)器中都安裝有這個(gè)功能模塊的.

Gzip壓縮率

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

啟用Gzip前

啟用Gzip后

對(duì)比其中三個(gè)文件前后壓縮大小：

文本類文件：

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%？

我們看到文本類文件的壓縮效果非常顯著，但是圖片體積沒(méi)變?？匆幌挛谋绢惖膆ttp響應(yīng)頭是有g(shù)zip壓縮過(guò):

而圖片的沒(méi)有：

這是因?yàn)橐话銓?duì)于圖片(png,jpg等)使用gzip的效果不好甚至恰得其反，所以一般都默認(rèn)對(duì)圖片不進(jìn)行g(shù)zip壓縮。

node.js啟用gzip

下面說(shuō)一下node的express框架如何使用gzip:

1.安裝一個(gè)compression依賴：

npm install compression

2.調(diào)用：

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

//盡量在其他中間件前使用compression
app.use(compression());

基本的使用就是這樣就ok了，另外如果想只對(duì)某些請(qǐng)求使用此功能，可以使用它的過(guò)濾方法：

app.use(compression({filter: shouldCompress}))

function shouldCompress (req, res) {
 if (req.headers['x-no-compression']) {
  // 這里就過(guò)濾掉了請(qǐng)求頭包含'x-no-compression'
  return false
 }

 return compression.filter(req, res)
}

其他的功能請(qǐng)參考compression的文檔。

另外附上nginx的配置

#on為啟用，off為關(guān)閉
gzip on;

#設(shè)置允許壓縮的頁(yè)面最小字節(jié)數(shù)，頁(yè)面字節(jié)數(shù)從header頭中的Content-Length中進(jìn)行獲取。默認(rèn)值是0，不管頁(yè)面多大都?jí)嚎s。建議設(shè)置成大于1k的字節(jié)數(shù)，小于1k可能會(huì)越壓越大。
gzip_min_length 1k;

#獲取多少內(nèi)存用于緩存壓縮結(jié)果，‘4 16k'表示以16k*4為單位獲得
gzip_buffers 4 16k;

#gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值
gzip_comp_level 5;

#對(duì)特定的MIME類型生效,其中'text/html'被系統(tǒng)強(qiáng)制啟用
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

簡(jiǎn)單解釋下參數(shù)

1) gzip

語(yǔ)法：gzip on/off
默認(rèn)值：off
作用域：http, server, location
說(shuō)明：開啟或者關(guān)閉 gzip 模塊，這里使用 on 表示啟動(dòng)

2) gzip_min_length

語(yǔ)法：gzip_min_length length
默認(rèn)值：gzip_min_length 0
作用域：http, server, location
說(shuō)明：設(shè)置允許壓縮的頁(yè)面最小字節(jié)數(shù)，頁(yè)面字節(jié)數(shù)從header頭中的Content-Length中進(jìn)行獲取。默認(rèn)值是0，不管頁(yè)面多大都?jí)嚎s。建議設(shè)置成大于1k的字節(jié)數(shù)，小于1k可能會(huì)越壓越大。|

3) gzip_buffers

語(yǔ)法: gzip_buffers number size
默認(rèn)值: gzip_buffers 4 4k/8k
作用域: http, server, location
說(shuō)明：設(shè)置系統(tǒng)獲取幾個(gè)單位的緩存用于存儲(chǔ)gzip的壓縮結(jié)果數(shù)據(jù)流。4 16k 代表以 16k 為單位，按照原始數(shù)據(jù)大小以 16k 為單位的4倍申請(qǐng)內(nèi)存。

4) gzip_comp_level

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

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

您可能感興趣的文章: