React Web App 与生产性能问题

Question

这是“它在我的开发环境中运行良好”的问题之一。一个重要的客户端是在我们的 React Web 应用程序（graphql、mobx 和 apollo）上体验缓慢的性能。因为它往往会在长时间使用（数小时）后发生，我想知道这是垃圾收集还是内存泄漏问题。

我尝试使用 Chrome 开发者工具的性能功能，但是我很难确定问题出在哪里。内存使用量确实增加了。向我展示这个问题并不是特别有帮助。它表明 Nodes 自登录后从 5K 增加到 22K，Listeners 从 1K 增加到 10K，Heap 从 160MB 增加到 440MB。

我阅读了许多关于使用 Chrome 性能工具的文章。他们没有让我更接近发现问题。喜欢听听 StackOverflow 社区的建议。也很想听听有关工具和咨询服务的建议。

谢谢。

Answer 1

React 性能改进提示

1. 使用不可变数据结构
2. 函数/无状态组件和 React.PureComponent
3. 多个块文件 4.在Webpack中使用生产模式标志 5.依赖优化
4. 使用 React.Fragments 避免额外的 HTML 元素包装器
5. 避免在渲染函数中定义内联函数。
6. 在 JavaScript 中限制和去抖动事件操作
7. 避免使用索引作为地图的键
8. 在初始状态下避免使用道具
9. 在 DOM 元素上传播 props
10. 在 Redux 中使用 Reselect 来避免频繁的重新渲染
11. 避免在 componentWillMount() 中进行异步初始化
12. 记忆 React 组件
13. 用 CSS 动画代替 JS 动画
14. 使用 CDN
15. 将 Web Worker 用于 CPU 密集型任务
16. 虚拟化长列表
17. 分析和优化您的 Webpack Bundle 膨胀
18. 考虑服务器端渲染
19. 在 Web 服务器上启用 Gzip 压缩

了解更多：https://www.codementor.io/blog/react-optimization-5wiwjnf9hj

加速反应的工具

1. 你为什么更新
2. React 开发者工具
3. Chrome DevTools 性能时间表