背景
如果你是個前端開發人員,你肯定知道線上環境要把js,css,圖檔等壓縮,盡量減少檔案的大小,提升響應速度,特别是對移動端,這個非常重要。
壓縮
壓縮方式
前端壓縮的方式很多,依賴java的有ant工具,前端自己打包壓縮的有grunt,gulp,webpack,這些壓縮也很重要,基本上能壓縮50%以上,下面我們對壓縮檔案來個對比,如圖所示,這是未壓縮的
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SOxQjNkF2NwADO4kTZ5MjZmJWMkJWN4cTMiVTN2YTN08CXyEzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLzM3Lc9CX6MHc0RHaiojIsJye.png)
這是壓縮後的
高能預警!!!gzip能在壓縮的基礎上再進行壓縮50%以上!!!
gzip壓縮原理
但是不是每個浏覽器都支援gzip的,如果知道用戶端是否支援gzip呢,請求頭中有個Accept-Encoding來辨別對壓縮的支援。用戶端http請求頭聲明浏覽器支援的壓縮方式,服務端配置啟用壓縮,壓縮的檔案類型,壓縮方式。當用戶端請求到服務端的時候,伺服器解析請求頭,如果用戶端支援gzip壓縮,響應時對請求的資源進行壓縮并傳回給用戶端,浏覽器按照自己的方式解析,在http響應頭,我們可以看到content-encoding:gzip,這是指服務端使用了gzip的壓縮方式。
那麼怎麼看有沒有用gzip壓縮的檔案呢,打開f12,檢視network,按照下面的方式過濾
content-encoding是gzip的話就說明傳回的是gzip
如何啟用gzip
前面說過了,啟用gzip需要用戶端和服務端的支援,如果用戶端支援gzip的解析,那麼隻要服務端能夠傳回gzip的檔案就可以啟用gzip了,現在來說一下幾種不同的環境下的服務端如何配置
node端
node端很簡單,隻要加上compress子產品即可,代碼如下
var compression = require('compression')
var app = express();
//盡量在其他中間件前使用compression
app.use(compression());
這是基本用法,如果還要對請求進行過濾的話,還要加上
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文檔
如果用的是koa,用法和上面的差不多
const compress = require('koa-compress');
const app = module.exports = new Koa();
app.use(compress());
因為node讀取的是生成目錄中的檔案,是以要先用webpack等其他工具進行壓縮成gzip,webpack的配置如下
const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',// 目标檔案名
algorithm: 'gzip',// 使用gzip壓縮
test: new RegExp(
'\\.(js|css)$' // 壓縮 js 與 css
),
threshold: 10240,// 資源檔案大于10240B=10kB時會被壓縮
minRatio: 0.8 // 最小壓縮比達到0.8時才會被壓縮
})
);
plugins是webpack的插件
tomcat
tomcat的配置如下
找到tomcat的server.xml檔案,找到其中Connector節點然後進行配置修改,具體配置如下
<Connectorport="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true"compression="on" compressionMinSize="2048"noCompressionUserAgents="gozilla, traviata"compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>
參數說明:
- compression="on" 打開壓縮功能
- compressionMinSize="2048" 啟用壓縮的輸出内容大小,當被壓縮對象的大小>=該值時才會被壓縮,這裡面預設為2KB
- noCompressionUserAgents="gozilla, traviata" 對于以下的浏覽器,不啟用壓縮
- compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 壓縮類型
注意:tomcat7以後,js檔案的mimetype類型變為了application/javascript,而在tomcat7以下則為text/javascript;具體的tomcat7定義的類型可以在:conf/web.xml檔案中找到。
可以在web.xml下搜尋,如我搜尋javascript會找到如下代碼
<mime-mapping>
<extension>js</extension>
<mime-type>application/javascript</mime-type>
</mime-mapping>
nginx
-
gzip on
on為啟用,off為關閉
-
gzip_min_length 1k
設定允許壓縮的頁面最小位元組數,頁面位元組數從header頭中的Content-Length中進行擷取。預設值是0,不管頁面多大都壓縮。建議設定成大于1k的位元組數,小于1k可能會越壓越大。
-
gzip_buffers 4 16k
擷取多少記憶體用于緩存壓縮結果,‘4 16k’表示以16k*4為機關獲得
-
gzip_comp_level 5
gzip壓縮比(1~9),越小壓縮效果越差,但是越大處理越慢,是以一般取中間值;
-
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
對特定的MIME類型生效,其中'text/html’被系統強制啟用
-
gzip_http_version 1.1
識别http協定的版本,早起浏覽器可能不支援gzip自解壓,使用者會看到亂碼
-
gzip_vary on
啟用應答頭"Vary: Accept-Encoding"
-
gzip_proxied off
nginx做為反向代理時啟用,off(關閉所有代理結果的資料的壓縮),expired(啟用壓縮,如果header頭中包括"Expires"頭資訊),no-cache(啟用壓縮,header頭中包含"Cache-Control:no-cache"),no-store(啟用壓縮,header頭中包含"Cache-Control:no-store"),private(啟用壓縮,header頭中包含"Cache-Control:private"),no_last_modefied(啟用壓縮,header頭中不包含"Last-Modified"),no_etag(啟用壓縮,如果header頭中不包含"Etag"頭資訊),auth(啟用壓縮,如果header頭中包含"Authorization"頭資訊)
-
gzip_disable msie6
(IE5.5和IE6 SP1使用msie6參數來禁止gzip壓縮 )指定哪些不需要gzip壓縮的浏覽器(将和User-Agents進行比對),依賴于PCRE庫