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

Question

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

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

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

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 找到了它。开发工具似乎会跟踪（内存日志）在后台发生的所有更新，并添加到应用程序的总内存位置。jest 有可能以某种方式加载react-devTools 吗？对我来说似乎有点奇怪，但一切皆有可能。

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