前端性能優化之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、在/config/index.js中，修改配置開啟gzip

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'],

在修改productionGzip的默認值（false）為true之前，先安裝所需的依賴npm install --save-dev compression-webpack-plugin。

如果按上述操作完成后，打包時出錯，建議更換低版本的compression-webpack-plugin，推薦使用1.1.12或者1.1.11版本等
npm uninstall --save-dev compression-webpack-plugin
npm install --save-dev compression-webpack-plugin@1.1.12

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

http:{ 
  #啟用或禁用gzipping響應。#
  gzip on; 
  #設置用於壓縮響應的緩沖區number和size。默認情況下，緩沖區大小等於一個內存頁面。這是4K或8K，具體取決於平台。#
  gzip_static on;
  #啟用或禁用gzipping響應。#
  gzip_buffers 4 16k;
  #設置level響應的gzip壓縮。可接受的值范圍為1到9。#
  gzip_comp_level 5;
  #設置將被gzip壓縮的響應的最小長度。長度僅由“Content-Length”響應頭字段確定。#
  gzip_min_length 100;
  #匹配MIME類型進行壓縮，text/html默認被壓縮。#
  gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

修改完nginx配置，重啟服務。

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

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

打開Chrome控制台，可以看到Network下的Response Headers中返回了Content-Encoding: gzip，表明gzip開啟成功。
而Request Headers里面的Accept-Encoding: gzip只是表示前端（用戶瀏覽器）支持gzip的壓縮方式。

服務器支持gzip的方式可以有兩種：
1、打包的時候生成對應的.gz文件，瀏覽器請求xx.js時，服務器返回對應的xxx.js.gz文件
2、瀏覽器請求xx.js時，服務器對xx.js進行gzip壓縮后傳輸給瀏覽器

來源：https://segmentfault.com/a/1190000018142232