遇到了 React 性能的一点问题,求调试思路

2022-11-02 12:54:26 +08:00
 sillydaddy

现状:同一个项目,用了 ant design 组件,在更新了 package.json 的依赖包之后(主要是 babel 从 6 更新到 7),再次编译出来的 html+bundle.js 跑起来比以前慢。项目的源码都是一样的,只是 node_modules 里面的库版本不一样。不仅性能有差异,compile 出来的 bundle.js 大小也有较大差别。

调试:使用 react devtools 调试了一下,发现好像是 antd 的 table ,在慢的版本里,在数据没有变化的时候,也会重新渲染,而快的版本里就没有。 观察了一下 devtools 里面这两个版本的 React Components 树,没有发现什么大的差别。但慢的版本里面会有插入<Sentinel>这样的组件。

疑问:怎么用 react devtools 调试这种重新渲染的问题呢?感觉不知道从哪里入手了。devtools 的 profiler 的火焰图虽然大概知道什么意思,两个版本的火焰图也明显有差别,但不知道怎么用它来调试,找到真正的问题所在。

不懂这块的调试和 profile 是一个很大的短板。希望大家能指点一二,先谢过了。

1749 次点击
所在节点    React
2 条回复
maichael
2022-11-02 13:15:49 +08:00
sillydaddy
2022-11-02 21:32:12 +08:00
@maichael
谢谢。表面的问题找到了,是我对 package 包的管理有点混乱,package 里写的版本号与 node_modules 里的不一致。
确实是 antd 的版本导致的性能差异。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/892054

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX