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

最新推荐文章于 2024-03-27 09:38:20 发布
最新推荐文章于 2024-03-27 09:38:20 发布
阅读量9.2k 收藏 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
并行美滋滋

最低0.47元/天 解锁文章
黑芝麻饺子
关注
专栏目录
React 项目打包后文件体积过大，网页加载速度慢的问题。（gzip的使用）
Wu_shuxuan的博客
03-21 1万+
react项目中利用dva脚手架，roadhog打包工具打包后只生成了一个index.css 和 index.js 。所有的 js文件 都打包在了一个 index.js 文件中，所以这个文件有1.1M。部署到服务器上，首次访问首页加载的会特别慢，这样会流失很多的用户。 解决办法： gzip 压缩。 GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来...
ant design pro 加载慢_【React】ant design pro项目打包后页面加载缓慢
weixin_42504785的博客
12-29 1124
用ant design pro框架做的项目，打包之后每一个页面加载的速度都特别慢，在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImport: false, 进行按需加载还是运行速度缓慢浏览器加载时有个js加载了1s多，打包了以后的js也很大请教一下大家，怎么做一下打包优化，还有页面性能的问题我分析了文件大小，做了公共模块的的提取...
react项目做的h5页面加载缓慢优化（3s优化到0.6s）
m0_46365130的博客
08-14 929
禁用生成 Source Map 是一种权衡，可以根据项目的实际需求和优化目标来决定是否禁用。如果您对调试需求不是特别强烈，可以考虑在生产构建中禁用 Source Map 以获取更好的性能。但如果需要保留调试能力，可以在生产构建中保留生成 Source Map。打包到生产环境时去掉SOURCEMAP。配置webpack进行相关优化。
react学习--简单优化访问网页加载慢问题
weixin_42429220的博客
08-10 2264
经过几天的奋斗。基本页面代码已完成，马上放服务器。 效果如下： …等。 当访问主页时，等的时间实在是太久，这怎么行？于是查看了一下Network， 发现： 24 + 秒，我的天。。。。。不行，得整顿整顿代码。 1、devtool 设置false 找到react项目中 node_modules --> react-scripts–>config–> webpack.config.js, 设置 devtool 为 false。打包。嗯，好像没啥用。依然很慢，但是项目打包js中少了
优化方案——用iframe嵌套网页进项目里面加载特别慢
最新发布
weixin_44867717的博客
03-27 3310
嵌套网页时，加载速度可能会受到影响，特别是当嵌套的网页与项目处于不同的域名或子域名时。嵌套网页加载缓慢的问题，提高项目的性能和用户体验。通过以上方法，你可以尝试解决。
记一次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错误。...
今天被人说：页面加载太慢了……
yehaocheng520的博客
04-27 1153
这是我第一次遇到因为页面加载慢别人说的事…… 先说一下项目： 前后端不分离的项目，我开发都是用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 181
react中网络请求的优化！在页面跳转的时候我会去检查一下redux中是否存在我需要的值如果没有我再去调用接口如果有的话那我就不去发网络请求；如果上个接口挂掉了，那么我下个接口就不发了这样就又省了一个网络请求我写博客不一定非要粘贴点代码；对吧写博客的意义并不是非要给别人说我的代码很牛就是厉害就是大神就是配当代码崽；然后我还自己用photoshop处理了图片，进行了图片压缩如果有的地方图片质量可以用...
react脚手架creat react-app创建的项目编译/热更新慢？
关中刀客在青岛
11-30 1735
新起了一个项目，cra脚手架创建的react，但发现热更新非常慢，一次要五六秒。而几周前同样创建过的一个项目，热更新一次就一两秒钟。 对比两个项目，把package.json整个替换了重装依赖，问题依然。 最后把yarn.lock文件给替换了，问题解决。 猜想问题是依赖的小版本升级造成。 ...
React开发引入antd后首次加载过慢的解决办法
苏一恒
02-28 7777
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 解决问题的第一步，先分析原因： 打开开发者工具=》NetWork，先clear一次，刷新，在network中可以看到，加载时间耗时...
关于react+umi+dva+antd mobile打包上线后加载DOM太慢，出现一段时间的空白的解决方法1
走在实践的老路上
11-20 7705
此项目是个需要嵌套到甲方的APP中H5项目，用的 react+umi+dva+antd mobile编写，写完上线后发现在加载之初会有一段很长时间的空白 如上图所示，umi加载顺序为先加载umi文件再加载vendors文件然后是layout.js 最后才是对应的页面的文件。 解决后效果如下： 方法如下： 1.修改webpack打包配置， 在.umirc.js文件中添加打包配置 chainWeb...
umi + react+antd遇到的问题
qq_39692513的博客
09-01 1046
Q1:antd下拉选项偏移，如何固定？ 使用getPopupContainer属性 Q2:antd表格table设置width不起效，原因？解决方法？ 原因：若当前column字段为超长连续单词或数字就会破坏表格布局。 解决方法： 可为其他column加上宽度，在表格上加上style：style={{ wordBreak: 'break-all' }}，为了美观，还可以给超长连续单词column加上ellipsis属性 Q3:umi更改生成文件的hash值，只添加其他异步文件的ha...
vendor.js过大，导致首次加载白屏时间很长
Admin_yws的博客
09-06 1097
原因分析：由于vendor体积较大，下载时间长，造成首屏加载缓慢 可以从以下方面减少整个包的体积： 1.npm install --save-dev compression-webpack-plugin，开启gzip压缩 2.productionSourceMap 设置为false 3.在index.html界面CDN引入 4.vue-router 路由懒加载 ...
React开发（250）:react项目理解 ant design loding控制页面转圈加载
歌谣的博客
11-02 450
lecturer, lecturerOrganization, admin, menu, modalOkButtonLoading: loading. effects['lecturer/save'] || loading.effects['lecturer/update'], spanLoading: loading.effects['lecturer/sa ve'] || loading.effects['lecturer/update'],
一行代码优化 pdfjs 加载大文件的pdf 速度
weixin_45485922的博客
10-13 4315
优化大文件pdf 加载速度
react项目太大，打包速度很慢和经常打包失败的解决方案
qq_28013889的博客
09-03 3765
一、解决打包慢的问题 1、使用插件：hard-source-webpack-plugin npm install hard-source-webpack-plugin 或 yarn add hard-source-webpack-plugin 2、在webpack的配置文件中使用 const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); module.exports = { // ...... plugins:
单页面应用（Vue、React）部署到服务器全攻略
"本文主要探讨了Vue.js和React.js等单页面应用的部署到服务器的正确方法，重点讲解了如何配置Nginx服务器以解决常见的部署问题，如资源找不到、直接访问HTML空白页以及刷新路由时出现404错误。" 在开发Vue或React等...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值