專案效能優化之用compression-webpack-plugin外掛開啟gzip壓縮,以vue為例

水冗水孚 發表於 2022-06-20
Webpack Vue

問題描述

本文以vue為例,記錄一下,使用webpack外掛compression-webpack-plugin開啟gzip壓縮的步驟流程,以及對比開啟gzip壓縮前後所需要的時間,得出結論:**這個外掛的確能夠做效能優化,減少載入的時間**react也是同一個道理,在此不贅述

前端配置之vue.config.js配置

第一步,下載compression-webpack-plugin

cnpm i [email protected] --save

注意,這裡不能直接下載,需要下載低版本的。直接下載就是最新版的了,vue腳手架暫時不支援最新版的,所以就會報錯:TypeError: Cannot read property 'tapPromise' of undefined。我這裡下載是指定@6.1.1版本,是可以用的

第二步,vue.config.js使用

下方程式碼,直接複製貼上使用即可

const CompressionPlugin = require('compression-webpack-plugin');//引入gzip壓縮外掛

// 暴露配置項,會被合併到webpack中去
module.exports = {
    chainWebpack(config) {
        // ......
    },
    configureWebpack: config => {
        // 開發環境不配置
        if (process.env.NODE_ENV !== 'production') return
        // 生產環境才去配置
        return {
            plugins: [
                new CompressionPlugin({ //此外掛不能使用太高的版本,否則報錯:TypeError: Cannot read property 'tapPromise' of undefined
                    // filename: "[path][base].gz", // 這種方式是預設的,多個檔案壓縮就有多個.gz檔案,建議使用下方的寫法
                    filename: '[path].gz[query]', //  使得多個.gz檔案合併成一個檔案,這種方式壓縮後的檔案少,建議使用
                    algorithm: 'gzip', // 官方預設壓縮演算法也是gzip
                    test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正則給匹配到的檔案做壓縮,這裡是給html、css、js以及字型(.ttf和.woff和.eot)做壓縮
                    threshold: 10240, //以位元組為單位壓縮超過此大小的檔案,使用預設值10240吧
                    minRatio: 0.8, // 最小壓縮比率,官方預設0.8
                    //是否刪除原有靜態資原始檔,即只保留壓縮後的.gz檔案,建議這個置為false,還保留原始檔。以防:
                    // 假如出現訪問.gz檔案訪問不到的時候,還可以訪問原始檔雙重保障
                    deleteOriginalAssets: false
                })
            ]
        }
    },
};
這裡配置完以後,暫時還不能使用,還需要後端做一下配置,這裡後端以nginx為例

後端配置之nginx配置

下方程式碼,直接複製貼上使用即可

    server {
        listen       80;
        server_name  localhost;
        location / {
            try_files $uri $uri/ /index.html;
            root C:/nginx-1.18.0/html/gzip/dist;
            index  index.html index.htm;
        }
        location /api/ {
            proxy_pass http://localhost:6666/;
        }
        
        # 主要是下方的gizp配置哦,直接複製貼上就可以使用啦,親測有效哦
        gzip on; # 開啟gzip壓縮
        gzip_min_length 4k; # 小於4k的檔案不會被壓縮,大於4k的檔案才會去壓縮
        gzip_buffers 16 8k; # 處理請求壓縮的緩衝區數量和大小,比如8k為單位申請16倍記憶體空間;使用預設即可,不用修改
        gzip_http_version 1.1; # 早期版本http不支援,指定預設相容,不用修改
        gzip_comp_level 2; # gzip 壓縮級別,1-9,理論上數字越大壓縮的越好,也越佔用CPU時間。實際上超過2的再壓縮,只能壓縮一點點了,但是cpu確是有點浪費。因為2就夠用了
                 # 壓縮的檔案型別 MIME型別,百度一下,一大把                                    # css             # xml             # 識別php     # 圖片
        gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf;
                 # text                   # 早期js                 # js        # js的另一種寫法                                                                                 # .eot字型                   # woff字型  # ttf字型
        gzip_vary on; # 是否在http header中新增Vary: Accept-Encoding,一般情況下建議開啟       
    }

未開啟gzip壓縮,載入時間圖示

專案沒有使用compression-webpack-plugin外掛沒開啟的時候,我們發現時間能有好幾百毫秒,載入資源時間是有點長了,未開啟如下圖:

專案效能優化之用compression-webpack-plugin外掛開啟gzip壓縮,以vue為例

開啟gzip壓縮,載入時間圖示

gizp壓縮多了一個.gz檔案

注意開啟gzip壓縮以後,對應壓縮檔案中就會多了.gz的檔案,比如字型壓縮資料夾中:

專案效能優化之用compression-webpack-plugin外掛開啟gzip壓縮,以vue為例

當然別的js資料夾中也有.gz css資料夾中也有.gz 這裡就不一一截圖了,大家看自己的dist資料夾就可以看到了。接下來看開啟了gzip壓縮以後,到底優化了多少

看看最終效能優化如何

專案效能優化之用compression-webpack-plugin外掛開啟gzip壓縮,以vue為例

對比上方未開啟gzip壓縮以後,的確載入時間優化了不少。另外,從首屏載入而言,直觀感受,也是快了一些。

響應頭多了Content-Encoding: gzip

另外,如果開啟gzip壓縮,在http請求中,也可以看到響應頭多了Content-Encoding: gzip,沒開啟gzip壓縮是沒這個的。如下圖:

專案效能優化之用compression-webpack-plugin外掛開啟gzip壓縮,以vue為例

總結

好記性不如爛筆頭,記錄一下吧,如果幫到了您給個讚唄 ^_^