gzip壓縮文件&webPack配置Compression-webpack-plugin

gzip壓縮文件&webPack配置Compression-webpack-plugin

做用：提高網絡傳輸速率=>優化web頁面加載時間

基本原理

1. 瀏覽器請求資源文件時會自動帶一個Accept-Encoding的請求頭告訴服務器支持的壓縮編碼類型

2. 服務器配置開啓gzip選項：

   接收客戶端資源文件請求，查看請求頭Content-encoding支持的壓縮編碼格式，若是是包含gzip那麼
   在每次響應資源請求以前進行gzip編碼壓縮後再響應返回資源文件(在響應頭會帶上Content-encoding: gzip)

3. 瀏覽器接收到響應後查看請求頭是否帶有Content-encoding:gzip，若是有進行對返回的資源文件進行解壓縮而後再進行解析渲染

注意點

• 低版本瀏覽器兼容性，服務器能夠設置一些忽略規則忽略爲瀏覽器
• 媒體文件無需開啓:圖片、音樂和視頻大多數都已壓縮過了，HTML,CSS AND JAVARSCRIPT
• CPU負載：壓縮文件耗費CPU（服務器須要壓縮文件、瀏覽器解壓文件）

webpack優化

• 若是你使用了webpack，那麼能夠藉助CompressionWebpackPlugin插件來提早對文件進行Gzip壓縮
• 這樣服務器查找到有與源文件同名的.gz文件就會直接讀取，不會主動壓縮，下降cpu負載，優化了服務器性能
• webpack配置：
  

其餘相關

Content-Encoding

• 值

gzip
表示採用 Lempel-Ziv coding (LZ77) 壓縮算法，以及32位CRC校驗的編碼方式。這個編碼方式最初由 UNIX 平臺上的 gzip 程序採用。出於兼容性的考慮， HTTP/1.1 標準提議支持這種編碼方式的服務器應該識別做爲別名的 x-gzip 指令。

compress
採用 Lempel-Ziv-Welch (LZW) 壓縮算法。這個名稱來自UNIX系統的 compress 程序，該程序實現了前述算法。
與其同名程序已經在大部分UNIX發行版中消失同樣，這種內容編碼方式已經被大部分瀏覽器棄用，部分由於專利問題（這項專利在2003年到期）。

deflate
採用 zlib 結構 (在 RFC 1950 中規定)，和 deflate 壓縮算法(在 RFC 1951 中規定)。

identity
用於指代自身（例如：未通過壓縮和修改）。除非特別指明，這個標記始終能夠被接受。

br
表示採用 Brotli 算法的編碼方式。

引自MDNhttps://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Encoding

• 兼容性

服務器啓用gzip

• node端
  nodejs很幸福，只需use一個compress模塊

var compression = require('compression')
var app = express();
//儘可能在其餘中間件前使用compression
app.use(compression());

• 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"/>

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

服務器配置引自juan26=>https://segmentfault.com/a/1190000012571492?utm_source=tag-newest