Vue项目因chunk-vendors.js过大导致首页加载慢的优化

问题描述：
由于首次登录后，界面加载较慢，排查界面加载项耗时，发现是前端加载打包后的第三方依赖的css、js文件太大（大概12M），导致界面加载慢（耗时12秒），

解决方案：
利用compression-webpack-plugin插件，前端打包时将比较大的css、js文件压缩成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。
操作步骤如下：
步骤一：安装compression-webpack-plugin插件
npm install --save-dev compression-webpack-plugin
npm install compression-webpack-plugin@6.1.1
打包的时候如果报以下的错误，需要执行 npm install compression-webpack-plugin@6.1.1

步骤二：修改vue的配置文件 vue.config.js
const path = require(‘path’);
const webpack = require(‘webpack’)
const CompressionPlugin = require(‘compression-webpack-plugin’)
const zlib = require(‘zlib’)
const isProduction = process.env.NODE_ENV === ‘production’

module.exports = {
configureWebpack: {
resolve: {
alias: {
‘@’: path.resolve(__dirname, ‘./src’),
‘@i’: path.resolve(__dirname, ‘./src/assets’),
}
},
plugins: [
new webpack.IgnorePlugin(/^./locale$/,/moment$/),
// 下面两项配置才是 compression-webpack-plugin 压缩配置
// 压缩成 .gz 文件
new CompressionPlugin({
filename: ‘[path][base].gz’,
algorithm: ‘gzip’,
test: /.js$|\dot{c}ss$|.html$/,
threshold: 10240,
minRatio: 0.8
}),
]
},
productionSourceMap: false,
}

步骤三：nginx配置
gzip on;
#设置缓冲区大小
gzip_buffers 4 16k;
#压缩级别官网建议是6
gzip_comp_level 6;
#压缩的类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;

优化效果
修改后，js文件从12M压缩到2M，加载速度从12秒优化到3秒左右

关注公众号了解更多内容