解决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中前端如何实现pdf预览功能(含vue-pdf插件用法)
这篇文章主要给大家介绍了vue中前端如何实现pdf预览功能的相关资料,文中包含vue-pdf插件用法,在前端开发中,很多时候我们需要进行pdf文件的预览操作,需要的朋友可以参考下
2023-07-07
解决vue-router中的query动态传参问题
下面小编就为大家分享一篇解决vue-router中的query动态传参问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vite+vue3+element-plus搭建项目的踩坑记录
这篇文章主要介绍了vite+vue3+element-plus搭建项目的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Nuxt.js踩坑总结分享
本篇文章主要介绍了Nuxt.js踩坑总结分享，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue实现轮播图帧率播放
这篇文章主要为大家详细介绍了vue实现轮播图帧率播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
Vue实现动态创建和删除数据的方法
下面小编就为大家分享一篇Vue实现动态创建和删除数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
详解在vue-cli中使用graphql即vue-apollo的用法
这篇文章主要介绍了详解在vue-cli中使用graphql即vue-apollo的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue3+arco design通过动态表单方式实现自定义筛选功能
这篇文章主要介绍了vue3+arco design通过动态表单方式实现自定义筛选,本文主要实现通过动态表单的方式实现自定义筛选的功能,用户可以自己添加筛选的项目,筛选条件及筛选内容,需要的朋友可以参考下
2024-05-05
Vue-Router基础学习笔记(小结)
这篇文章主要介绍了Vue-Router基础学习笔记(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
详解vue-router 动态路由下子页面多页共活的解决方案
这篇文章主要介绍了vue-router 动态路由下子页面多页共活的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12