vue项目加载慢，Nginx页面优化

优化的思路：

F12调起调试模式，查看js和css加载所需时间（注意由于资源过大导致的加载过慢），

下图是经过压缩后的，压缩前chunk-vendors.js我的接近10M，加载几十毫秒。

如果部署在Nginx上的web项目，可以配置Nginx，对js和css进行压缩可在 Nginx 配置文件 server { } 加入如下配置：

gzip on;gzip_buffers 32 4K;gzip_comp_level 6;gzip_min_length 100;gzip_types application/javascript text/css text/xml;gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）gzip_vary on;

最终效果如下：

vue项目加载慢，Nginx页面优化相关推荐

Vue项目加载过慢优化研究
近日研究了一下公司vue项目加载过慢问题,首次打开速度要15秒,经过研究,从两方面着手,最终使项目速度降到了3秒一.通过过gzip加载参考文章: 一.webpack优化之Gzip(vue) - 简 ...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...
nginx部署vue项目加载资源慢优化方案
目录 1.问题 2.解决方案推荐gzip压缩解压 2.1 vue项目的配置文件中加如下配置 2.3 nginx服务器配置 1.问题当我采用nginx部署了vue的项目后发现第一次访问网站需要1分左右 ...
vue 项目加载顺序_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
vue项目加载不出图片解决方式
vue项目中图片加载不出来,像下面这样,图片地址是有的. 解决方案: 1.在html5或jsp的header加入meta. 找到index.html文件.在head中添加如下代码. <meta ...
前端性能优化不完全手册【已更新至React、原生JS懒加载和Nginx负载均衡】
性能优化是一门大学问,本文仅对个人一些积累知识的阐述,欢迎下面补充. 抛出一个问题,从输入url地址栏到所有内容显示到界面上做了哪些事? 1.浏览器向DNS服务器请求解析该 URL 中的域名所对应的 ...
初级前端小程序项目加载速度优化
这份文字是根据近期团队做来问丁香医生 SPA 和丁香医生小程序加载速度优化的经历整理而成. 效果古人有一句话叫做:治感冒看疗效.既然是关于速度优化的,我们就先来看一下优化的效果. 来问丁香医生 ...
vue动态加载js和css以及部分页面加载特定的js和css
vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...
[vue] 第一次加载页面时会触发哪几个钩子？
[vue] 第一次加载页面时会触发哪几个钩子? beforeCreate, created, beforeMount, mounted 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...

vue项目加载慢，Nginx页面优化

vue项目加载慢，Nginx页面优化相关推荐

最新文章

热门文章