問題描述
本文以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壓縮是沒這個的。如下圖:
總結
好記性不如爛筆頭,記錄一下吧,如果幫到了您給個讚唄 ^_^