现状:同一个项目,用了 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 是一个很大的短板。希望大家能指点一二,先谢过了。
1
maichael 2022-11-02 13:15:49 +08:00
https://reactjs.org/docs/profiler.html 搭配 devtools 使用
|
2
sillydaddy OP |