背景

如果你是個前端開發人員，你肯定知道線上環境要把js，css，圖片等壓縮，儘量減少檔案的大小，提升響應速度，特別是對移動端，這個非常重要。

壓縮方式

前端壓縮的方式很多，依賴java的有ant工具，前端自己打包壓縮的有grunt，gulp，webpack，這些壓縮也很重要，基本上能壓縮50%以上，下面我們對壓縮檔案來個對比。

如圖所示，這是未壓縮的

這是壓縮後的

高能預警！！！gzip能在壓縮的基礎上再進行壓縮50%以上！！！

gzip壓縮原理

但是不是每個瀏覽器都支援gzip的，如果知道客戶端是否支援gzip呢，請求頭中有個Accept-Encoding來標識對壓縮的支援。客戶端http請求頭宣告瀏覽器支援的壓縮方式，服務端配置啟用壓縮，壓縮的檔案型別，壓縮方式。當客戶端請求到服務端的時候，伺服器解析請求頭，如果客戶端支援gzip壓縮，響應時對請求的資源進行壓縮並返回給客戶端，瀏覽器按照自己的方式解析，在http響應頭，我們可以看到content-encoding:gzip，這是指服務端使用了gzip的壓縮方式。

那麼怎麼看有沒有用gzip壓縮的檔案呢，開啟f12，檢視network，按照下面的方式過濾

content-encoding是gzip的話就說明返回的是gzip

還有一點 gzip不壓縮圖片，因為壓縮之後會更大- -，所以一般到是壓縮css和js

如何啟用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使用環境:http,server,location,if(x),一般把它定義在nginx.conf的http{…..}之間

• 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庫

以上程式碼可以插入到 http {...}整個伺服器的配置裡，也可以插入到虛擬主機的 server {...}或者下面的location模組內