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

简介: 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;

最终效果如下:

目录
相关文章
|
2天前
|
JavaScript 应用服务中间件 开发工具
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
13 4
|
2月前
|
负载均衡 应用服务中间件 网络安全
Django后端架构开发:Nginx服务优化实践
Django后端架构开发:Nginx服务优化实践
40 2
|
2月前
|
应用服务中间件 Linux nginx
在Linux中,如何统计ip访问情况?分析 nginx 访问日志?如何找出访问页面数量在前十位的ip?
在Linux中,如何统计ip访问情况?分析 nginx 访问日志?如何找出访问页面数量在前十位的ip?
|
2月前
|
Ubuntu 搜索推荐 应用服务中间件
如何在 Ubuntu 14.04 上配置 Nginx 使用自定义错误页面
如何在 Ubuntu 14.04 上配置 Nginx 使用自定义错误页面
33 2
|
2月前
|
运维 安全 应用服务中间件
运维系列.Nginx:自定义错误页面(一)
运维系列.Nginx:自定义错误页面(一)
251 1
|
2月前
|
缓存 前端开发 Java
"揭秘!SpringBoot携手Nginx,性能飙升秘籍大公开:轻松掌握配置优化,让你的应用快如闪电!"
【8月更文挑战第11天】随着微服务架构的发展,SpringBoot成为构建RESTful API的首选,Nginx则作为高性能的反向代理服务器提升应用性能。本文将探讨两者如何协同工作,包括Nginx的负载均衡策略、静态资源缓存及数据压缩配置;同时讨论SpringBoot的线程池优化、缓存策略及性能监控。通过这些方法,帮助开发者显著提高系统的整体性能和可用性。
76 1
|
2月前
|
缓存 负载均衡 Java
SpringBoot 与 Nginx 配置优化:性能拉满的关键学习方法
【8月更文挑战第1天】在现代Web开发领域,SpringBoot以其快速启动、简化配置的特性成为众多开发者的首选框架,而Nginx则以其高性能的HTTP和反向代理服务器功能著称。将两者结合,并通过精细的配置优化,可以显著提升Web应用的性能与稳定性。以下是为您学生定制的SpringBoot与Nginx配置优化的学习方法与研究路径。
60 1
|
2月前
|
缓存 运维 应用服务中间件
运维系列.Nginx:自定义错误页面(二)
运维系列.Nginx:自定义错误页面(二)
53 0
|
2月前
|
JavaScript 应用服务中间件 nginx
Vue项目部署Nginx后,刷新页面出现404问题
Vue项目部署Nginx后,刷新页面出现404问题
29 0
|
3月前
|
JavaScript 前端开发 应用服务中间件
Nginx——一个域名下部署多个Vue项目
如何在同一域名下部署第二个Vue项目而不影响现有项目:更新`vue.config.js`,设置`publicPath`为`/screen/`。修改Vue Router的`base`为`screen`。在Nginx配置中添加新location `/screen`,指向第二项目`dist`目录。测试访问`http://<域名>/screen/`。别忘了检查并修复任何遗漏的配置,如数据看板默认设置。
199 2
下一篇
无影云桌面