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

水冗水孚發表於2022-06-20
優化WebPluginVue

問題描述

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

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

第一步，下載compression-webpack-plugin

cnpm i compression-webpack-plugin@6.1.1 --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外掛沒開啟的時候，我們發現時間能有好幾百毫秒，載入資源時間是有點長了，未開啟如下圖：

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

gizp壓縮多了一個.gz檔案

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

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

看看最終效能優化如何

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

響應頭多了Content-Encoding: gzip

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

總結

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

相關文章