Vue首頁效能優化之gzip

首頁白屏時間過長，可能是下載資源的時間過長，我們可以將專案gzip壓縮，記得這種辦法需要服務端支援哦 。

配置webpack

這裡我們用到了compression-webpack-plugin
首先 npm i -D compression-webpack-plugin

const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  chainWebpack: config => {
   	config.plugin('compression-webpack-plugin').use('compression-webpack-plugin', [{
    	filename: '[path][base].gz',
      	test: /\.(js|css|woff|ttf|eot|woff2)$/,
       	threshold: 10240
    }]);
  }
}

具體的配置可以檢視連結的網站哦。將你的程式碼寫在vue.config.js（vue-cli3.0的話）。

採用npm run build 打包一下。這裡擷取了部分檔案， 可以看到體積縮小了 3倍之多！

nginx支援gzip

gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";

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 2

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庫

檢視效果

並不是每個瀏覽器都支援gzip的， 我們可以檢視瀏覽器頭請求中的Accep-Encoding中是否含有gzip。在 下面的圖片中，瀏覽器是支援的，那麼伺服器經過我們剛剛的配置之後，把壓縮後的資源返回給了客戶端，給瀏覽器自己解析。我們可以看到 在響應頭中，Content-Encoding 是gzip，代表我們成功了。

再看一下size，我們真的有壓縮呢！