问题描述:
由于首次登录后,界面加载较慢,排查界面加载项耗时,发现是前端加载打包后的第三方依赖的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
/
,
/
m
o
m
e
n
t
/, /moment
/,/moment/),
// 下面两项配置才是 compression-webpack-plugin 压缩配置
// 压缩成 .gz 文件
new CompressionPlugin({
filename: ‘[path][base].gz’,
algorithm: ‘gzip’,
test: /.js
∣
c
˙
s
s
|\.css
∣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秒左右
关注公众号了解更多内容