gzip壓縮文件&webPack配置Compression-webpack-plugin
作用：提升網絡傳輸速率=>優化web頁面加載時間
基本原理
-
瀏覽器請求資源文件時會自動帶一個Accept-Encoding的請求頭告訴服務器支持的壓縮編碼類型
-
服務器配置開啟gzip選項：
接收客戶端資源文件請求，查看請求頭Content-encoding支持的壓縮編碼格式，如果是包含gzip那么
在每次響應資源請求之前進行gzip編碼壓縮后再響應返回資源文件(在響應頭會帶上Content-encoding: gzip) -
瀏覽器接收到響應后查看請求頭是否帶有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