时间戳

首页 > 解决方案 > JavaScript React 项目中的高 Jest 堆内存使用率

javascript - JavaScript React 项目中的高 Jest 堆内存使用率

问题描述

我在使用 jest 进行测试时记录了堆使用情况，因为我们的 jest 测试（60 多个测试用例和 250 个测试）在我们的 ci 中导致 137 内存不足异常。

管理部门问我关于内存泄漏的问题，因为节点进程在机器上运行时使用了大约 5GB 的 RAM。

我正在研究 jest 的堆使用情况，以及如何调试它，所以我找到了这些堆快照，你可以在运行时使用 Chrome Inspektor：

node --inspect-brk --expose-gc ./node_modules/react-scripts/node_modules/.bin/jest --runInBand --logHeapUsage

... or for create-react-app

yarn react-scripts --inspect-brk test --runInBand --logHeapUsage

这个堆使用的结果让我很困惑，但我发现了一些我知道的东西，例如 React-Dom 和 Lodash。

堆使用图像

Lodash 和 React-Dom 等多次加载到该堆快照中是否正常？或者我们是否在代码中实现了重大错误，这导致了这些 lodash、react-dom 等的多重加载。

首先我在考虑不同的库版本，但由于在Retained Size同一个库的所有行中都是完全相同的，我有点怀疑。

问题是：

谢谢！

标签： javascriptreactjsmemory-managementjestjsheap-memory

解决方案

  1. 我认为这取决于您要测试的内容。如果您使用 jest 测试的过程需要 5Gb 或 RAM，那么我可以看到它正在发生。很可能是您正在测试的进程导致内存使用。

  2. 根据我的经验，不，Lodash 和 react-dom 是不需要大量 RAM 的小型库（尤其是 react-dom）。Lodash 的 RAM 使用再次取决于它的任务，如果您使用它来更改或计算大型数组，那么 RAM 使用会上升。

  3. 是的，在我的 Electron 应用程序中浪费了大约 1 个月的时间寻找内存泄漏，我使用 React-devTools 找到了它。似乎 devtools 会跟踪（内存中的日志）在引擎盖下反应中发生的所有更新，并添加到应用程序的总 ram 位置。开玩笑可能会以某种方式加载 react-devTools 吗？对我来说似乎有点奇怪，但一切皆有可能。

如果 lodash 和 react-dom 一起使用 RAM，听起来可能会发生大量的重新渲染/路由，特别是如果您使用 lodash 根据路由计算字符串或数组。如果您不使用类反应组件（因此使用功能组件），我建议切换并使用 componentDidMount() 和 componentWillUnmount() 以减少内存泄漏的可能性。您可以在此处查看文档。

推荐阅读