一个vue项目里面打包出来的chunk-vendors文件过大,每次加载都过慢,影响体验。于是需要寻求解决方案去优化它。
优化思路有2种:
1、按需加载,使用懒加载的方式,并减少没必要的模块。这种需要逐个调优。本次先不处理
2、按gzip方式来压缩文件,服务器发送到浏览器的文件是gzip文件,浏览器再进行解析。这里需要nginx配合。本次优化采用本方法。
流程如下:
1、vue工程里面安装插件
npm install compression-webpack-plugin@6.1.1 --save
注意这里版本号要选择6.1.1的,最新版本会有报错。
详情可以看:
https://blog.csdn.net/chengzhf/article/details/116236687
2、在vue.config.js里面配置插件。找到configureWebpack的plugins,往里面添加:
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
完整配置形如:
configureWebpack: {
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true
}
},
sourceMap: false,
parallel: true
}),
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
]
},
注意前面需要添加引用
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
3、配置nginx
在监听http的地方添加
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-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]\.";
完整示例如下:
server {
listen 3003;
server_name localhost;
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-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]\.";
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root D:\develop\dist;
index index.html index.htm;
add_header Cache-Control no-store;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
按这个步骤配置完毕,用nginx发布之后,可以看到chunk-vendors文件小了很多,访问速度快了不少。