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

Question

我在使用 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 在同一个库的所有行中完全相同，我有点怀疑。

问题是：

• 通过这些数量的测试，开玩笑使用 5GB RAM 是否正常？
• react-dom 和 lodash 以及其他库的这种多重加载是否正常？
• 我可以通过其他方式查找漏洞吗？

谢谢！

Answer 1

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() 来减少内存泄漏的可能性。 您可以查看文档here。