记一次react项目部署之后页面加载极度缓慢的问题

最新推荐文章于 2024-05-12 16:51:10 发布
最新推荐文章于 2024-05-12 16:51:10 发布
阅读量9.1k 收藏 1
点赞数 1
分类专栏： react 文章标签： 加载缓慢
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41108537/article/details/99670626
版权
在部署React项目后，页面加载出现21.11s的延迟，通过Firefox诊断发现是JS问题。采用async和defer属性优化script标签的加载顺序，解决异步加载导致的执行顺序混乱。尽管仍有延迟，但通过将内联代码转为异步脚本文件，显著提升了加载速度。
摘要由CSDN通过智能技术生成

加载太慢了

我吐了
21.11s我是真的吐了,紧接着刷新,就会立即加载
..不知道为啥好了
然后Firefox看了一下是js的问题,我太难了
js加载太久
我太难了
这么点东西加载都这么慢
然后为script标签加个async属性,让他有异步加载,加载完之后执行
但是async因为是乱序异步的,所以会导致不按顺序执行js,
所以建议使用defer,虽然是依旧是异步加载,但是会按先后顺序执行
我真是太难了,
我发现最大的问题不在于加载文件,而是有一个script标签里直接是写代码的,我换了defer之后依旧会有点慢,所以切成了async运行script标签,defer加载之后的js脚本文件,虽然还是有点慢,但是我接受了
优化之后
Firefox
并行美滋滋

黑芝麻饺子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
读懂React原理之调和与Fiber
xiaofeng123aazz的博客
10-03 353
调和是一种算法，就是React对比新老虚拟DOM的过程，以决定需要更新哪一部分。暂停工作，稍后再回来优先考虑不同类型的工作重用以前完成的工作如果不再需要，则中止工作为了实现上面的要求，我们需要把任务拆分成一个个可执行的单元，这些可执行的单元就叫做一个Fiber，一个Fiber就代表一个可执行的单元。一个Fiber就是一个普通的JS对象，包含一些组件的相关信息。// fiber 标签 证明是什么类型fiber。// key调和子节点时候用到。
react学习--简单优化访问网页加载慢问题
weixin_42429220的博客
08-10 2163
经过几天的奋斗。基本页面代码已完成，马上放服务器。 效果如下： …等。 当访问主页时，等的时间实在是太久，这怎么行？于是查看了一下Network， 发现： 24 + 秒，我的天。。。。。不行，得整顿整顿代码。 1、devtool 设置false 找到react项目中 node_modules --> react-scripts–>config–> webpack.config.js, 设置 devtool 为 false。打包。嗯，好像没啥用。依然很慢，但是项目打包js中少了
如何优化React应用以及提高页面速度
百度一下 猎人社区
04-28 1826
React是一款流行的JavaScript框架，被广泛应用于构建Web应用。但是，由于React应用的复杂性和资源需求，优化React应用并提高页面速度成为了一个关键问题。在本文中，我们将介绍如何优化React应用以及提高页面速度。
creata-react-app脚手架创建react项目时非常慢的问题
最新发布
weixin_42822426的博客
05-12 242
create-react-app脚手架创建很慢
前端优化、vendors过大、按需引入、加载时间太久、CDN加速
callMeOldWang的博客
05-03 4423
最近项目做完，到了令人激动的优化环节，也遇到了不少问题，现在呢，记录一下优化的过程。 首先呢，先要知道有哪些优化的方法？ 一、减少请求次数，看同一个页面有没有重复调用的接口 二、图片压缩，或者做成网图也可以减小包的体积 三、插件按需引入 四、CDN加速 。。。可以优化的方式有很多，这里我主要说下按需引入和CDN 首先项目做完后 在package-json中，在 build 指令 后面加上这个，指令...
关于react+umi+dva+antd mobile打包上线后加载DOM太慢，出现一段时间的空白的解决方法1
走在实践的老路上
11-20 7600
此项目是个需要嵌套到甲方的APP中H5项目，用的 react+umi+dva+antd mobile编写，写完上线后发现在加载之初会有一段很长时间的空白 如上图所示，umi加载顺序为先加载umi文件再加载vendors文件然后是layout.js 最后才是对应的页面的文件。 解决后效果如下： 方法如下： 1.修改webpack打包配置， 在.umirc.js文件中添加打包配置 chainWeb...
React开发引入antd后首次加载过慢的解决办法
苏一恒
02-28 7653
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 解决问题的第一步，先分析原因： 打开开发者工具=》NetWork，先clear一次，刷新，在network中可以看到，加载时间耗时...
记一次react前端项目打包优化的方法
10-15
在本文中，我们将深入探讨如何优化一个React前端项目，特别是针对打包过程中的性能问题。首先，我们遇到的问题是在uat环境中，由于bundle.js文件过大（3.6MB），导致页面加载时白屏时间超过30秒，严重影响用户体验。...
React项目部署在阿里云服务器ECS
01-07
本来计划是将一个React工程部署在自己的Centos虚拟机中，但是因为一些网络和安全问题暂时停止了这个计划，于是就把该项目转移到阿里云服务器中，这篇笔记记载了如何从第一步开始直到浏览器通过IP可以访问你的React...
Nginx配置React项目Url后直接输入路由路径时报404问题的解决
09-30
然而，在部署React应用到服务器时，尤其是使用Nginx作为反向代理服务器时，可能会遇到一个常见的问题：当用户直接在浏览器地址栏输入特定的路由路径（如`http://localhost/demo/page1`）时，服务器返回404错误。...
reactiframe:使用ReactJS构建的iFrame
04-27
React框架 使用ReactJS构建的iFrame 即将推出 ....
nginx上部署react项目的实例方法
09-29
在本文中，我们将深入探讨如何在Nginx服务器上部署React项目，这将涉及一系列步骤，包括准备项目、构建项目、配置Nginx以及解决特定问题。首先，我们需要一个已经开发完成的React项目，这里以名为`react-demo`的项目...
react+umi 部署后有些页面一直loading
weixin_39818813的博客
04-20 2571
1.背景 本次开发分为2期，其中2期和3期是单独部署的，二期的环境一直没有问题，所以页面正常访问，3期的代码发布后有些页面（设置页面）一直loading，一直没进入页面。 2.分析 尝试1 ：是不是发版因为网络等问题，漏了文件？重新打包构建—发现没用 尝试2 ：是不是部署缓存的问题？ 登录Jenkins，清理【工作空间—发现没用 尝试3 ：是不是浏览器缓存的问题？ 清空缓存并重新加载，清空本地缓存—发现没用 尝试4 ：是不是不加载的那个文件本身有问题？ 发现经过前几次尝试后，仍然只有那个设置页不加载，o
React获取服务器端时间以及自动更新
songshao の blog
10-21 1268
React 获取服务器端时间 ​ 思路：React获取服务器端时间，本质上就是给服务器端发送一个请求，然后从返回数据里面的headers里面获取到服务器date，然后更新服务器时间去格式化，获取服务器时间结束。按秒进行数据刷新，其实也很简单，就是使用定时器，进行动态递增即可，直接上代码。 获取服务器时间的方法： changeTime = async () => { let leftTime = await axios.get('/').then(response => {
React 项目打包后文件体积过大，网页加载速度慢的问题。（gzip的使用）
指南针的博客
02-22 2656
react项目中利用dva脚手架，roadhog打包工具打包后只生成了一个index.css 和 index.js 。所有的 js文件 都打包在了一个 index.js 文件中，所以这个文件有1.1M。部署到服务器上，首次访问首页加载的会特别慢，这样会流失很多的用户。 解决办法： gzip 压缩。 GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来...
今天被人说：页面加载太慢了……
yehaocheng520的博客
04-27 1080
这是我第一次遇到因为页面加载慢别人说的事…… 先说一下项目： 前后端不分离的项目，我开发都是用vs开发，页面扩展名都是.cshtml 由于页面做的是增删改查，详情页面的内容很多，我选择了用vue 引入vue.js和element js和css之后，详情的弹层部分通过iframe来展示 项目前后端不分离 本地引入js css文件 <link href="~/Content/plugins/layui-v2.4.3/layui/css/layui.css" rel="stylesheet" />
react项目中路由懒加载封装组件页面无法切换
06-08
出现路由懒加载封装组件页面无法切换的问题，可能是因为以下原因： 1. 路由配置错误：请确保您的路由配置中使用了正确的组件引用，且路径和组件名称正确匹配。 2. 组件加载错误：请检查您的组件是否正确导出，并且...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值