vue頁面載入慢,chunk-vendors.js檔案太大
阿新 • • 發佈:2022-03-14
今天拉取合併了同事的程式碼後頁面載入速度變得非常慢,經過排查發現是因為載入的chunk-vendors.js太大
58m 28s就很離譜
經過同事指導加上百度終於找到解決辦法,配置compression-webpack-plugin實現Gzip壓縮
安裝compression-webpack-plugin: yarn add [email protected]
這個要指定版本,不然會有其它問題
在vue.config.js中新增配置const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
module.exports = {
configureWebpack: config => {
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}));
config.devtool = false;
},
chainWebpack: config => {
config.plugins.delete("prefetch");
// 移除 preload 外掛
config.plugins.delete('preload');
// 壓縮程式碼
config.optimization.minimize(true)
},
}
配置完成後重啟專案,重新整理瀏覽器就可以了