前端性能優化之——gzip

注: 文章摘自 juan26 - 思否

壓縮方式

前端壓縮的方式不少，依賴java的有ant工具，前端本身打包壓縮的有grunt，gulp，webpack，這些壓縮也很重要，基本上能壓縮50%以上，下面咱們對壓縮文件來個對比，如圖所示

• 這是未壓縮的

  

• 這是壓縮後的

  

• 開啓 gzip 後能在壓縮的基礎上再進行壓縮50%以上

  

壓縮原理

是否是每一個瀏覽器都支持gzip呢? 如何知道客戶端是否支持gzip呢?

• 請求頭中有個 Accept-Encoding 來標識對壓縮的支持。客戶端 http 請求頭聲明瀏覽器支持的壓縮方式，服務端配置啓用壓縮，壓縮的文件類型，壓縮方式。當客戶端請求到服務端的時候，服務器解析請求頭，若是客戶端支持gzip壓縮，響應時對請求的資源進行壓縮並返回給客戶端，瀏覽器按照本身的方式解析，在http響應頭，咱們能夠看到 Content-Encoding: gzip，這是指服務端使用了 gzip 的壓縮方式

那麼怎麼看有沒有用gzip壓縮的文件呢?

• 打開 f12，查看 network，按照下面的方式過濾, content-encoding 是 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)
}
複製代碼

若是用的是 koa，用法和上面的差很少

const compress = require('koa-compress');
const app = module.exports = new Koa();
app.use(compress());
複製代碼

由於 node 讀取的是生成目錄中的文件，因此要先用 webpack 等其餘工具進行壓縮成 gzip，webpack 的配置以下 plugins 是 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 時纔會被壓縮
  })
);
複製代碼

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模塊內