事件:web项目上线后发现首次加载巨慢,查看network发现是chunk-vendors.XXX.js等资源文件太大导致资源加载缓慢
分析:根据哪儿慢优化哪儿的准则,针对性的配置打包优化方案
过程:
1.安装compression-webpack-plugin打包优化插件
npm install --save-dev compression-webpack-plugin
2.修改vue的配置文件 vue.config.js
const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
publicPath:'/appShare/',
productionSourceMap: false,
configureWebpack:{
resolve:{
alias:{
'@':path.resolve(__dirname, './src'),
'@i':path.resolve(__dirname, './src/assets'),
}
},
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^./locale$/, /moment$/),
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
]
},
测试:根据网上查找的方案优化,可以说是毫无效果
继续找优化:配置项加一行代码
chainWebpack: (config) => {
config.plugins.delete("prefetch");
}
继续测试:配置有效,加载时间由30秒变成了15秒,但是登陆成功进入首页也变成了15秒等待(随后删除配置)
以上配置参考地址:参考地址
再次优化:因为我是后端,所以想从nginx方向优化,查询相关资料,发现不用优化了,只需要把上面项目压缩配置加上,然后在nginx配置加入如下配置信息
server{
gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 9;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
}
结果:优化成功,1秒级加载
总结:优化完成发现是自己知识储备量的问题,原来nginx也要配置开启gzip才行,以前居然没有主要到过这种常见问题!