vue页面加载慢,chunk-vendors.js文件太大

今天拉取合并了同事的代码后页面加载速度变得非常慢,经过排查发现是因为加载的chunk-vendors.js太大

58m 28s就很离谱

经过同事指导加上百度终于找到解决办法,配置compression-webpack-plugin实现Gzip压缩
安装compression-webpack-plugin: yarn add compression-webpack-plugin@5.0.1
这个要指定版本,不然会有其它问题

在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)
},
}
配置完成后重启项目,刷新浏览器就可以了

作者:TanXJ

出处:https://www.cnblogs.com/tanxj/p/16005344.html

posted @   路遥_13  阅读(4107)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示