解决VUE打包后与nginx代理出现加载速度超级慢的问题
更新时间：2023年09月28日 14:56:46 作者：其妙的太空人
这篇文章主要介绍了解决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秒以下，直接起飞！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue双向数据绑定的原理以及知识点总结，并做了代码实例分析，有需要的朋友参考下。2018-04-04
这篇文章主要介绍了Vue3之路由的元数据信息meta详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
vue element-ui el-date-picker限制选择时间为当天之前的代码
这篇文章主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
数组操作是前端最重要的数据操作，构造数组数据，又是数组操作中很常见的，本文将梳理下map和forEach方法在Vue项目中的使用，感兴趣的朋友跟随小编一起看看吧2022-09-09
这篇文章主要介绍了编写更好的v-for循环的6种技巧，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了Vue.2.0.5过渡效果使用技巧，实例分析了Vue.2.0.5过渡效果的技巧，非常具有实用价值，需要的朋友可以参考下。2017-03-03
这篇文章主要介绍了vue项目里面引用svg文件并给svg里面的元素赋值,本文分步骤通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
这篇文章主要介绍了浅谈vue项目,访问路径#号的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue项目动态渲染input,绑定的参数不实时更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
element-ui是一个比较完善的UI库,但是使用它需要有一点vue的基础，下面这篇文章主要给大家介绍了关于在vue 2.0项目中如何引入element-ui的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
最新评论