解决VUE打包后与nginx代理出现加载速度超级慢的问题
作者：其妙的太空人
这篇文章主要介绍了解决VUE打包后与nginx代理出现加载速度超级慢的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue打包后与nginx代理出现加载速度超级慢
其中的原因是我们在vue打包的过程中打包了一些没有用的东西，造成数据量过大使得页面加载速度超级慢的原因，
最常见的页面加载速度就就 看板，这种页面。
nginx部署vue项目加载资源慢优化方案
问题
当我采用nginx部署了vue的项目后发现第一次访问网站需要1分左右才加载出来，打开f12检查发现一个cdn引入花了40多秒，其他的10来秒的也有几个，而我的css和js什么的才几百kb，这要是大点我网站直接就崩了，于是研究了几个方案，得出结论：cdn加速的文件下载到本地，本地在使用使用gzip压缩。
解决方案推荐
gzip压缩解压
vue要使用gzip压缩首先要安装依赖
npm install --save-dev compression-webpack-plugin
但可能会打包错误， 因为compression的版本比node的低，安装低版本就可以了
npm install --save-dev compression-webpack-plugin@1.0.0 //安装低版本
1.vue项目的配置文件中加如下配置
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css', 'png']
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
asset: '[path].gz[query]', // 提示 compression-webpack-plugin@3.0.0的话asset改为filename
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
]
},
}2.nginx服务器配置
找到/etc/nginx/nginx.conf文件中http配置中添加如下内容
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;然后nginx -s reload 重启一下然后访问网站：
如下图便是成功了
这时候发现响应都在1秒以下，直接起飞！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。