深嵌套的组件树
frequent contationfortations
sheavy API相互作用
-
当应用程序正常运行时,我注意到了性能瓶颈,例如:-
当状态更新通过app- 传播时,请重新租赁
large JavaScript捆绑包导致更长的初始负载时间
高内存使用情况,尤其是在处理动态数据
时
要解决这些问题,我尝试了以下内容:-
- 使用React.memo和Usememo的卸载,但有些组件仍然不必要地重新渲染。
使用React-Window虚拟化,这改善了大型列表的性能,但没有帮助深度嵌套的组件。
- 用react.lazy和悬念加载,这减少了初始捆绑包的大小,但并未消除所有性能问题。
使用REDUX和上下文API进行优化的州管理优化,但是当状态更新传播时,我仍然会经历不需要的重新租赁。
使用WebPack和动态导入进行编码,但我不确定如何进一步改善捆绑装加载策略。
我期望的是什么
- 卸载以防止深层嵌套组件中不必要的重新订阅。
虚拟化以提高列表性能而无需高内存使用。
- 代码分解和懒惰加载以大大减少初始负载时间。
REDUX和上下文API,可以有效地管理状态,而无需过多的重新汇款。
-
我在寻找什么
我想探索高级技术以进一步优化我的应用程序,例如:-
- 在深度嵌套的组件中量化不必要的重新订阅者。
高级代码拆分技术以优化JavaScript捆绑包。
封装工具(例如React Profiler,Chrome DevTools)有效地识别和修复瓶颈。
在性能和可伸缩性方面,SSR与CSR权衡取舍。
WEB工人或异步技术有效地处理昂贵的计算。
哪些现实世界中的一些现实策略和最佳实践在大规模反应应用中显着提高了性能?
-
- 这是一种以太斗争,有几种方法,因为您已经涵盖了我能想到的主要要点(非常好的优化),我没有关于您的应用程序如何发展它的工作方式,我尝试和遵循的常见方法是:
- Mergeapi在可能的情况下呼叫,promise.all(),而不是异步等待
由于您有Redux,请尝试将上下文作为API的数据存储,请勿在此处更新状态。
思考BFF(前端的后端),并尽可能多地处理应用程序的设置
BFFInfo
-
- 希望这会有所帮助,如果不是让我知道您是否遇到了更好的解决方案,因为我们在同一条船上