共計 4423 個字符，預計需要花費 12 分鐘才能閱讀完成。

gzip 簡介

HTTP 協(xié)議上的 gzip 編碼是一種用來改進 web 應用程序性能的技術，web 服務器和客戶端（瀏覽器）必須共同支持 gzip。目前主流的瀏覽器都支持該協(xié)議。

簡單來說，gzip 是一種壓縮技術。經(jīng)過 gzip 壓縮后，文件大小為原來的 30% 甚至更小，這樣，用戶瀏覽頁面的時候速度會快得多。

那么客戶端和服務器之間是如何通信來支持 gzip 的呢？通過下圖我們可以很清晰的了解。

客戶端 http 請求頭 Accept-Encoding 聲明瀏覽器支持的壓縮方式，服務端配置啟用壓縮，壓縮的文件類型，壓縮方式。當客戶端請求到服務端的時候，服務器解析請求頭，如果客戶端支持 gzip 壓縮，響應時對請求的資源進行處理并返回給客戶端，瀏覽器按照自己的方式解析，在 http 響應頭，我們可以看到content-encoding:gzip，這是指服務端使用了 gzip 的壓縮方式，返回的是 gzip 文件。

服務器返回 gzip 文件的處理方式可以有兩種：

1. 前端打包的時候生成了對應的.gz 文件，則瀏覽器請求 xx.js 時，服務器返回對應的 xxx.js.gz 文件
2. 否則，瀏覽器請求 xx.js 時，服務器對 xx.js 進行 gzip 壓縮后傳輸給瀏覽器

通常情況，前端會在打包時生成對應文件的.gz 文件，緩解服務器端壓縮并緩存 gzip 文件時，對處理器和內(nèi)存造成的壓力。

安裝前端壓縮插件

安裝 compression-webpack-plugin 包

npm i -D compression-webpack-plugin

由于腳手架版本兼容問題，直接安裝最新版可能會導致報錯

TypeError: Cannot read property‘tapPromise’of undefined

我這里 vue cli 是 4.4.6 版本，安裝的是 6.1.1 版本

npm i -D compression-webpack-plugin@6.1.1

修改 vue.config.js 文件

在 vue.config.js 文件中添加以下代碼，和 gizp 壓縮無關的代碼這里已去除

const isProd = process.env.NODE_ENV === 'production';

const vueConfig = {
    configureWebpack: {
        // webpack plugins
        plugins: [......]
    }
}

if(isProd) {
  // production 模式下，plugins 中添加文件壓縮處理器
  const CompressionWebpackPlugin = require('compression-webpack-plugin');
  vueConfig.configureWebpack.plugins.push(new CompressionWebpackPlugin({test: /.js|.css/, // 對匹配的文件類型進行壓縮}))
}

module.exports = vueConfig;

服務器端如何啟用 gzip

前面說過了，啟用 gzip 需要客戶端和服務端的支持，如果客戶端支持 gzip 的解析，那么只要服務端能夠返回 gzip 的文件就可以啟用 gzip 了，現(xiàn)在來說一下幾種不同的環(huán)境下的服務端如何配置。

nginx 啟用 gzip

gzip 使用環(huán)境：http,server,location,if(x), 一般把它定義在 nginx.conf 的 http{……}之間

修改 nginx 配置，在 server 里添加以下代碼，與 listen 同級

gzip on; # 開啟 Gzip
gzip_static on; # 開啟靜態(tài)文件壓縮
gzip_min_length  1k; # 不壓縮臨界值，大于 1K 的才壓縮
gzip_buffers     4 16k;
gzip_comp_level 5;
gzip_types     application/javascript application/x-javascript application/xml application/xml+rss application/x-httpd-php text/plain text/javascript text/css image/jpeg image/gif image/png; # 進行壓縮的文件類型
gzip_http_version 1.1;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6].";

• gzip on
  on 為啟用，off 為關閉
• gzip_min_length 1k
  設置允許壓縮的頁面最小字節(jié)數(shù)，頁面字節(jié)數(shù)從 header 頭中的 Content-Length 中進行獲取。默認值是 0，不管頁面多大都壓縮。建議設置成大于 1k 的字節(jié)數(shù)，小于 1k 可能會越壓越大。
• gzip_buffers 4 16k
  獲取多少內(nèi)存用于緩存壓縮結果，‘4 16k’表示以 16k* 4 為單位獲得
• gzip_comp_level 5
  gzip 壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值;
• gzip_types application/javascript application/x-javascript application/xml application/xml+rss application/x-httpd-php text/plain text/javascript text/css image/jpeg image/gif image/png
  對特定的 MIME 類型生效, 其中 ’text/html’被系統(tǒng)強制啟用
• gzip_http_version 1.1
  識別 http 協(xié)議的版本, 早期瀏覽器可能不支持 gzip 自解壓, 用戶會看到亂碼
• gzip_vary on
  啟用應答頭 ”Vary: Accept-Encoding”
• gzip_proxied off
  nginx 做為反向代理時啟用 off(關閉所有代理結果的數(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 庫

tomcat 啟用 gzip

找到 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)容大小，當被壓縮對象的大小 >= 該值時才會被壓縮，這里面默認為 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>

切記上面的類型不能配置錯了，如果配置錯了壓縮是不會起作用的。

node 端啟用 gzip

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。

驗證處理結果

運行打包命令?npm run build，可以看到生成的 dist 文件夾中的 js 和 css 文件多出了同名.gz 文件，這里以 js 文件舉例。

打包后上傳服務器查看效果，可以發(fā)現(xiàn)瀏覽器上下載的是 gzip 壓縮后的文件。

通過 Network 可看到?Request Headers?和?Response Headers?里都帶有 gzip 標記

注：開發(fā)環(huán)境下，無法查看壓縮效果