壓縮方式
前端壓縮的方式很多，依賴java的有ant工具，前端自己打包壓縮的有g(shù)runt，gulp，webpack，這些壓縮也很重要，基本上能壓縮50%以上，下面我們對壓縮文件來個對比，如圖所示
-
這是未壓縮的
-
這是壓縮后的
-
開啟 gzip 后能在壓縮的基礎(chǔ)上再進行壓縮50%以上
壓縮原理
是不是每個瀏覽器都支持gzip呢? 如何知道客戶端是否支持gzip呢?
- 請求頭中有個
Accept-Encoding來標(biāo)識對壓縮的支持?？蛻舳?http 請求頭聲明瀏覽器支持的壓縮方式，服務(wù)端配置啟用壓縮，壓縮的文件類型，壓縮方式。當(dāng)客戶端請求到服務(wù)端的時候，服務(wù)器解析請求頭，如果客戶端支持gzip壓縮，響應(yīng)時對請求的資源進行壓縮并返回給客戶端，瀏覽器按照自己的方式解析，在http響應(yīng)頭，我們可以看到Content-Encoding: gzip，這是指服務(wù)端使用了 gzip 的壓縮方式
那么怎么看有沒有用gzip壓縮的文件呢?
- 打開 f12，查看 network，按照下面的方式過濾,
content-encoding是 gzip 的話就說明返回的是 gzip
啟用方式
前面說過了，啟用 gzip 需要客戶端和服務(wù)端的支持，如果客戶端支持 gzip 的解析，那么只要服務(wù)端能夠返回 gzip 的文件就可以啟用 gzip 了，現(xiàn)在來說一下幾種不同的環(huán)境下的服務(wù)端如何配置
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)
}
如果用的是 koa，用法和上面的差不多
const compress = require('koa-compress');
const app = module.exports = new Koa();
app.use(compress());
因為 node 讀取的是生成目錄中的文件，所以要先用 webpack 等其他工具進行壓縮成 gzip，webpack 的配置如下
plugins 是 webpack 的插件
注: compression-webpack-plugin 版本2.x以下的話, 要將 filename 改為 asset
const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]', // 目標(biāo)文件名
algorithm: 'gzip', // 使用 gzip 壓縮
test: new RegExp(
'\\.(js|css)$' // 壓縮 js 與 css
),
threshold: 10240, // 資源文件大于 10240B = 10kB 時會被壓縮
minRatio: 0.8 // 最小壓縮比達到 0.8 時才會被壓縮
})
);
tomcat
找到 tomcat 的 server.xml 文件，找到其中 Connector 節(jié)點然后進行配置修改，具體配置如下
<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"/>
參數(shù)說明：
-
compression="on"打開壓縮功能 -
compressionMinSize="2048"啟用壓縮的輸出內(nèi)容大小，當(dāng)被壓縮對象的大小>=該值時才會被壓縮，這里面默認為2KB -
noCompressionUserAgents="gozilla, traviata"對于以下的瀏覽器，不啟用壓縮 -
compressableMimeType="text/html, text/xml, text/javascript, text/css, text/plain"壓縮類型
注意：tomcat7 以后，js文件的 mimetype 類型變?yōu)榱?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 使用環(huán)境: http, server, location, if(x), 一般把它定義在 nginx.conf 的 http{…..} 之間
可以插入到 http {...}整個服務(wù)器的配置里，也可以插入到虛擬主機的 server {...}或者下面的location模塊內(nèi)
-
gzip on
on為啟用，off為關(guān)閉 -
gzip_min_length 1k
設(shè)置允許壓縮的頁面最小字節(jié)數(shù)，頁面字節(jié)數(shù)從header頭中的Content-Length中進行獲取。默認值是0，不管頁面多大都壓縮。建議設(shè)置成大于1k的字節(jié)數(shù)，小于1k可能會越壓越大。 -
gzip_buffers 4 16k
獲取多少內(nèi)存用于緩存壓縮結(jié)果，‘4 16k’表示以16k*4為單位獲得 -
gzip_comp_level 5
gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值; -
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
對特定的MIME類型生效,其中'text/html’被系統(tǒng)強制啟用 -
gzip_http_version 1.1
識別http協(xié)議的版本,早起瀏覽器可能不支持gzip自解壓,用戶會看到亂碼 -
gzip_vary on
啟用應(yīng)答頭"Vary: Accept-Encoding" -
gzip_proxied off
nginx做為反向代理時啟用,off(關(guān)閉所有代理結(jié)果的數(shù)據(jù)的壓縮),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 "MSIE [1-6]\."
(IE5.5和IE6 SP1使用msie6參數(shù)來禁止gzip壓縮 )指定哪些不需要gzip壓縮的瀏覽器(將和User-Agents進行匹配),依賴于PCRE庫
