前端性能優化之gzip

時間 2019-11-08

原文原文鏈接

gzip是GNUzip的縮寫，它是一個GNU自由軟件的文件壓縮程序。它最先由Jean-loup Gailly和Mark Adler建立，用於UNⅨ系統的文件壓縮。咱們在Linux中常常會用到後綴爲.gz的文件，它們就是GZIP格式的。現今已經成爲Internet 上使用很是廣泛的一種數據壓縮格式，或者說一種文件格式。javascript

HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。大流量的WEB站點經常使用GZIP壓縮技術來讓用戶感覺更快的速度。減小文件大小有兩個明顯的好處，一是能夠減小存儲空間，二是經過網絡傳輸文件時，能夠減小傳輸的時間。php

固然WEB服務器和客戶端（瀏覽器）必須共同支持gzip。目前主流的瀏覽器Chrome,firefox,IE等都支持該協議。常見的服務器如Apache，Nginx，IIS一樣支持gzip。css

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

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。vue

若是按上述操做完成後，打包時出錯，建議更換低版本的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.12java

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

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配置，重啓服務。nginx

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

至此，gzip已開啓。你能夠運行你的項目去檢測一下。

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

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

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