項目優化之使用compression-webpack-plugin插件開啟gzip壓縮,以vue為例

語言: CN / TW / HK

問題描述

本文以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使用

下方代碼,直接複製粘貼使用即可

```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配置

下方代碼,直接複製粘貼使用即可

```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插件沒開啟的時候,我們發現時間能有好幾百毫秒,加載資源時間是有點長了,未開啟如下圖:

111.png

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

gizp壓縮多了一個.gz文件

注意開啟gzip壓縮以後,對應壓縮文件中就會多了.gz的文件,比如字體壓縮文件夾中:

333.png

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

看看最終性能優化如何

444.png

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

響應頭多了Content-Encoding: gzip

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

666.png

總結

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