解决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实现鼠标经过显示悬浮框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue3.0 项目搭建和使用流程，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
本文主要介绍了Vue3中进行点击事件埋点,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-01-01
在开发后台管理系统的时候,很多地方都要用到导出excel表格,比如将table中的数据导出到本地,下面这篇文章主要给大家介绍了关于Vue导出Excel文件的相关资料,需要的朋友可以参考下2021-09-09
下面小编就为大家分享一篇快速解决vue-cli不能初始化webpack模板的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了Python实现学生成绩管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了Vue3和Vue2的slot-scope插槽用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
通过Vue 3,组合式API增强了我们利用Vue的能力,使我们的代码更具模块性和可读性,本文主要来和大家分享10个常用的Vue3组合式API,希望对大家有所帮助2024-01-01
SVG全称Scalable Vector Graphics,它是网络上使用最广泛的矢量图格式,在项目开发过程中,我们经常会用到svg矢量图,而且我们使用svg以后,页面上加载的不再是图片资源,本文将给大家介绍Vue3中引入、封装和使用svg矢量图的实现示例,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue+springmvc导出excel数据的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
最新评论