前端性能優化之Gzip
什麼是GZIP ？
gzip是GNUzip的縮寫，它是一個GNU自由軟件的文件壓縮程序。它是Jean-loupGailly和MarkAdler一起開發的。
壓縮原理
Gzip 壓縮背後的原理，是在一個文本文件中找出一些重複出現的字符串、臨時替換它們，從而使整個文件變小。
根據這個原理，文件中代碼的重複率越高，那麼壓縮的效率就越高，使用 Gzip 的收益也就越大。反之亦然。
文件格式
[filename].gz
Gzip 的優點
減少文件大小。gzip壓縮比率在3到10倍左右，可以大大節省服務器的網絡帶寬。
減少文件大小有兩個明顯的好處：
- 是可以減少存儲空間
- 是通過網絡傳輸文件時，可以減少傳輸的時間
對於帶寬較低的服務器是一種利好，開啓後可以加快我們網站的打開速度，原理是經過服務器壓縮，客戶端瀏覽器快速解壓的原理，可以大大減少了網站的流量。
Gzip 的缺點
- 開啓
gzip後會額外的增加很多cpu的開銷，會對服務器產生一起壓力，同時，客戶端解壓也需要cpu開銷（不過客戶端還好），這也是不建議把壓縮率設置太高的原因。 - 對圖片的壓縮支持不太好，會出現體積變大或圖片失真的問題。
如何開啓Gzip？
兩個先行條件
要開啓Gzip，需要先滿足兩個條件：
-
服務器支持並開啓
Gzip壓縮服務目前大多數的服務器都支持
Gzip壓縮服務，比如Nginx、IIS、Apache、tomcat等，只不過設置不同而已。 -
客戶端（瀏覽器）支持
Gzip解壓服務目前主流的瀏覽器都支持
Gzip解壓服務。
判斷是否已開啓Gzip服務？
通過查看HTTP請求來判斷：
如果服務器開啓了Gzip壓縮服務，HTTP的響應頭就會出現：
Content-Encoding: gzip
如果客戶端支持Gzip解壓服務，HTTP的響應頭就會出現：
Accept-Encoding：gzip
Nginx中開啓Gzip
配置屬性
-
gzip on;
on爲啓用，off爲關閉 -
gzip_min_length 1k;
設置允許壓縮的頁面最小字節數，頁面字節數從header頭中的Content-Length中進行獲取。默認值是0，不管頁面多大都壓縮。建議設置成大於1k的字節數，小於1k可能會越壓越大。 -
gzip_buffers 4 16k;
獲取多少內存用於緩存壓縮結果，4 16k表示以16k*4爲單位獲得，默認 4 8k -
gzip_proxied any;
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_comp_level 3;
壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值; -
gzip_types text/plain application/x-javascript text/css text/javascript;
對特定的MIME類型生效,其中text/html被系統強制啓用 -
gzip_http_version 1.1
識別http協議的版本,早起瀏覽器可能不支持gzip自解壓,用戶會看到亂碼，默認1.1 -
gzip_vary on
啓用應答頭Vary: Accept-Encoding，一般不需要設置 -
gzip_disable msie6
(IE5.5和IE6 SP1使用msie6參數來禁止gzip壓縮 )指定哪些不需要gzip壓縮的瀏覽器(將和User-Agents進行匹配),依賴於PCRE庫 -
gzip_static on;
nginx會優先匹配gzip文件來返回，如果沒有就尋找相應資源進行gzip壓縮再返回。
nginx.conf常用配置
gzip on;
gzip_min_length 10k;
// 設置大於10k起才壓縮
gzip_buffers 4 16k;
gzip_comp_level 3;
// 3到5
gzip_types text/css text/javascript;
// 只對js，css文件進行壓縮
Webpack開啓Gzip打包
Webpack的Gzip打包是通過插件compression-webpack-plugin來生成.gz文件。
配置流程
首先，安裝compression-webpack-plugin:
npm i -D compression-webpack-plugin
然後，在webpack配置文件中加入以下配置：
// 最好是先判斷以下環境變量是否是生產環境的打包
const CompressionWebpackPlugin = require('compression-wepback-plugin')
if (process.env.NODE_ENV === 'production') {
webpackConfig.plugins.push(
new CompressionWepbackPlugin({
fllename: '[path].gz[query]',
// 目標資源名稱。 [file] 會被替換成原始資源。[path] 會被替換成原始資源的路徑， [query] 會被替換成查詢字符串。默認值是 "[path].gz[query]"。
algorithm: 'gzip',
// 算法，默認'gzip'
test: '\\.(js|css))$',
// 所有匹配該正則的資源都會被處理。默認值是全部資源。
// 這裏只匹配了js、css文件
threshold: 10240,
//只有大小大於該值的資源會被處理。單位是 bytes。默認值是 0。
minRatio: 0.8
// 只有壓縮率小於這個值的資源纔會被處理。默認值是 0.8。
})
)
}
最後，在nginx配置開啓gzip壓縮
在上面的nginx常用配置中，添加gzip_static on;，這樣nginx 會優先匹配 gzip 文件來返回，如果沒有就尋找相應資源進行 gzip 壓縮再返回。
修改後的nginx配置如下：
gzip on;
gzip_min_length 10k;
gzip_buffers 4 16k;
gzip_comp_level 3;
gzip_types text/css text/javascript;
gzip_static on;
// `nginx` 會優先匹配 `gzip` 文件來返回，如果沒有就尋找相應資源進行 `gzip` 壓縮再返回。
優點
減少了服務器壓縮文件的壓力
缺點
增加了打包時間
總結
相比於用服務器每次請求都要壓縮的方式，這種犧牲一點打包時間的方式更加值得推薦使用。