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

React项目部署后的加载优化
最新推荐文章于 2025-03-11 17:29:12 发布
原创 最新推荐文章于 2025-03-11 17:29:12 发布 · 9.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#加载缓慢

在部署React项目后，页面加载出现21.11s的延迟，通过Firefox诊断发现是JS问题。采用async和defer属性优化script标签的加载顺序，解决异步加载导致的执行顺序混乱。尽管仍有延迟，但通过将内联代码转为异步脚本文件，显著提升了加载速度。

加载太慢了

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

最低0.47元/天 解锁文章

200万优质内容无限畅学
react项目做的h5页面加载缓慢优化（3s优化到0.6s）
m0_46365130的博客
08-14 1032
禁用生成 Source Map 是一种权衡，可以根据项目的实际需求和优化目标来决定是否禁用。如果您对调试需求不是特别强烈，可以考虑在生产构建中禁用 Source Map 以获取更好的性能。但如果需要保留调试能力，可以在生产构建中保留生成 Source Map。打包到生产环境时去掉SOURCEMAP。配置webpack进行相关优化。
React 项目打包后文件体积过大，网页加载速度慢的问题。（gzip的使用）
热门推荐
Wu_shuxuan的博客
03-21 1万+
react项目中利用dva脚手架，roadhog打包工具打包后只生成了一个index.css 和 index.js 。所有的 js文件 都打包在了一个 index.js 文件中，所以这个文件有1.1M。部署到服务器上，首次访问首页加载的会特别慢，这样会流失很多的用户。 解决办法： gzip 压缩。 GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来...
react学习--简单优化访问网页加载慢问题
weixin_42429220的博客
08-10 2369
经过几天的奋斗。基本页面代码已完成，马上放服务器。 效果如下： …等。 当访问主页时，等的时间实在是太久，这怎么行？于是查看了一下Network， 发现： 24 + 秒，我的天。。。。。不行，得整顿整顿代码。 1、devtool 设置false 找到react项目中 node_modules --> react-scripts–>config–> webpack.config.js, 设置 devtool 为 false。打包。嗯，好像没啥用。依然很慢，但是项目打包js中少了
ant design pro 加载慢_【React】ant design pro项目打包后页面加载缓慢
weixin_42504785的博客
12-29 1242
用ant design pro框架做的项目，打包之后每一个页面加载的速度都特别慢，在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImport: false, 进行按需加载还是运行速度缓慢浏览器加载时有个js加载了1s多，打包了以后的js也很大请教一下大家，怎么做一下打包优化，还有页面性能的问题我分析了文件大小，做了公共模块的的提取...
熬夜准备的一个React项目升级Vite的指南
petertanjinjie的博客
04-24 817
写在开头（边听歌边看效果更佳）在之前，已经很多朋友已经升级到了vite,但是大部分都是vue的项目，那么今天我们把之前webpack的react项目升级到vite!为此，为了让大家少踩坑，...
React应用3956572136685388的开发与部署
由于提供的文件信息内容极度简略，仅给出了一个标题“react-app3956572136685388”，一个相同描述以及一个空标签，还有一个压缩包文件名称“react-app3956572136685388-master”，从中无法获取到具体的项目内容和...
从零搭建一个Vite-react脚手架(附源码)
petertanjinjie的博客
07-30 1031
写在开头（边听歌边看效果更佳）在之前，已经很多朋友已经升级到了vite,但是大部分都是vue的项目，那么今天我们把之前webpack的react项目升级到vite!为此，为了让大家少踩坑，...
[整站程序]极度迅雷影视整站_09959.rar
08-10
【整站程序】极度迅雷影视整站_09959.rar是一个包含源码的压缩包，主要用于毕业设计项目，可能是一个完整的影视网站系统。这个压缩包中的内容可能涉及了构建一个影视站点所需的全部技术栈，包括前端界面、后端服务、...
Next+React项目启动慢刷新慢的解决方法
最新发布
xiaolouuuu的博客
03-11 2048
上班的时候遇到公司Next+React项目启动很慢，更改样式也加载半天，十分影响开发效率，在前辈的改动下，运行速度加快了很多，特此学习记录。在开发模式热模块重载（HMR）通过 Next.js 自己的开发服务器WindiCSSWindiCSS按需生成 CSS。
优化方案——用iframe嵌套网页进项目里面加载特别慢
weixin_44867717的博客
03-27 5812
嵌套网页时，加载速度可能会受到影响，特别是当嵌套的网页与项目处于不同的域名或子域名时。嵌套网页加载缓慢的问题，提高项目的性能和用户体验。通过以上方法，你可以尝试解决。
今天被人说：页面加载太慢了……
yehaocheng520的博客
04-27 1355
这是我第一次遇到因为页面加载慢别人说的事…… 先说一下项目： 前后端不分离的项目，我开发都是用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多个网络请求_react中网络请求的优化！
weixin_39843093的博客
12-19 208
react中网络请求的优化！在页面跳转的时候我会去检查一下redux中是否存在我需要的值如果没有我再去调用接口如果有的话那我就不去发网络请求；如果上个接口挂掉了，那么我下个接口就不发了这样就又省了一个网络请求我写博客不一定非要粘贴点代码；对吧写博客的意义并不是非要给别人说我的代码很牛就是厉害就是大神就是配当代码崽；然后我还自己用photoshop处理了图片，进行了图片压缩如果有的地方图片质量可以用...
@monaco-editor/react界面一直在loading/loading时间过长
m0_72436362的博客
06-25 3401
其实仔细观察官方文档能发现，官方已经给出了一种解决方案，将请求的网络资源放到本地进行请求，就是替换CDN，就不会出现这种问题了。主要是因为@monaco-editor/react在第一次加载编辑器组件时，会调用网络资源。
react脚手架creat react-app创建的项目编译/热更新慢？
关中刀客在青岛
11-30 1833
新起了一个项目，cra脚手架创建的react，但发现热更新非常慢，一次要五六秒。而几周前同样创建过的一个项目，热更新一次就一两秒钟。 对比两个项目，把package.json整个替换了重装依赖，问题依然。 最后把yarn.lock文件给替换了，问题解决。 猜想问题是依赖的小版本升级造成。 ...
React开发引入antd后首次加载过慢的解决办法
苏一恒
02-28 8062
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 解决问题的第一步，先分析原因： 打开开发者工具=》NetWork，先clear一次，刷新，在network中可以看到，加载时间耗时...
关于react+umi+dva+antd mobile打包上线后加载DOM太慢，出现一段时间的空白的解决方法1
走在实践的老路上
11-20 7849
此项目是个需要嵌套到甲方的APP中H5项目，用的 react+umi+dva+antd mobile编写，写完上线后发现在加载之初会有一段很长时间的空白 如上图所示，umi加载顺序为先加载umi文件再加载vendors文件然后是layout.js 最后才是对应的页面的文件。 解决后效果如下： 方法如下： 1.修改webpack打包配置， 在.umirc.js文件中添加打包配置 chainWeb...
umi + react+antd遇到的问题
qq_39692513的博客
09-01 1116
Q1:antd下拉选项偏移，如何固定？ 使用getPopupContainer属性 Q2:antd表格table设置width不起效，原因？解决方法？ 原因：若当前column字段为超长连续单词或数字就会破坏表格布局。 解决方法： 可为其他column加上宽度，在表格上加上style：style={{ wordBreak: 'break-all' }}，为了美观，还可以给超长连续单词column加上ellipsis属性 Q3:umi更改生成文件的hash值，只添加其他异步文件的ha...
React开发（250）:react项目理解 ant design loding控制页面转圈加载
歌谣的博客
11-02 500
lecturer, lecturerOrganization, admin, menu, modalOkButtonLoading: loading. effects['lecturer/save'] || loading.effects['lecturer/update'], spanLoading: loading.effects['lecturer/sa ve'] || loading.effects['lecturer/update'],
React项目中的SVG加载器：react-inlinesvg
首先，从标题中我们可以得知这是一个专门针对React的前端项目，其核心功能是加载SVG图形，并且将其内联到React组件中。SVG（Scalable Vector Graphics）是一种基于XML的图像格式，用于描述二维矢量图形。它广泛应用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值