前端性能優化之gzip

gzip是GNUzip的縮寫，它是一個GNU自由軟體的檔案壓縮程式。它最早由Jean-loup Gailly和Mark Adler建立，用于UNⅨ系統的檔案壓縮。我們在Linux中經常會用到字尾為.gz的檔案，它們就是GZIP格式的。現今已經成為Internet 上使用非常普遍的一種資料壓縮格式，或者說一種檔案格式。

HTTP協定上的GZIP編碼是一種用來改進WEB應用程式性能的技術。大流量的WEB站點常常使用GZIP壓縮技術來讓使用者感受更快的速度。減少檔案大小有兩個明顯的好處，一是可以減少存儲空間，二是通過網絡傳輸檔案時，可以減少傳輸的時間。

當然WEB伺服器和用戶端（浏覽器）必須共同支援gzip。目前主流的浏覽器Chrome,firefox,IE等都支援該協定。常見的伺服器如Apache，Nginx，IIS同樣支援gzip。

下面就以Vue項目為例，介紹一下gzip的使用（vue-cli 2.*）

1、在​<code>​/config/index.js​</code>​中，修改配置開啟gzip

在修改​<code>​productionGzip​</code>​的預設值（false）為true之前，先安裝所需的依賴​<code>​npm install --save-dev compression-webpack-plugin​</code>​。

如果按上述操作完成後，打包時出錯，建議更換低版本的​<code>​compression-webpack-plugin​</code>​，推薦使用1.1.12或者1.1.11版本等

​<code>​npm uninstall --save-dev compression-webpack-plugin​</code>​

​<code>​npm install --save-dev [email protected]​</code>​

2、在nginx中開啟gzip，​<code>​/nginx/conf/nginx.conf​</code>​中添加gzip配置

修改完nginx配置，重新開機服務。

關于gzip詳細的配置和描述，請查閱 Module ngx_http_gzip_module

至此，gzip已開啟。你可以運作你的項目去檢測一下。

打開Chrome控制台，可以看到​<code>​Network​</code>​下的​<code>​Response Headers​</code>​中傳回了​<code>​Content-Encoding: gzip​</code>​，表明gzip開啟成功。

而​<code>​Request Headers​</code>​裡面的​<code>​Accept-Encoding: gzip​</code>​隻是表示前端（使用者浏覽器）支援gzip的壓縮方式。

伺服器支援gzip的方式可以有兩種：

1、打包的時候生成對應的.gz檔案，浏覽器請求xx.js時，伺服器傳回對應的xxx.js.gz檔案

2、浏覽器請求xx.js時，伺服器對xx.js進行gzip壓縮後傳輸給浏覽器