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

2024-03-31

我在使用 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在同一个库的所有行中完全相同,我对此表示怀疑。

问题是:

  • 通过如此大量的测试,jest 使用 5GB RAM 是否正常?
  • React-dom 和 Lodash 以及其他库的多重加载正常吗?
  • 我可以研究其他东西来查找泄漏吗?

Thanks!


  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() 以减少内存泄漏的可能性。 你可以查看文档here https://reactjs.org/docs/react-component.html.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript React 项目中 Jest 堆内存使用率较高 的相关文章

  • 从字符串中删除货币符号并使用 Javascript 中的单行转换为数字

    我下面有一个字符串 它是以英镑为单位的价格 我想删除货币符号 然后将其转换为我可以用来与另一个值进行比较的数字 价格 例如 X gt Y 14 50 我之前已将字符串转换为用于货币的数字 var priceNum parseFloat pr
  • 在 HTML SELECT 标记中禁用键盘

    我想禁用 HTML SELECT 标记的键盘 以便用户只能使用鼠标来选择选项 我试过了event cancelBubble true on the onkeydown onkeyup and onkeypress没有运气的事件 有任何想法吗
  • 表单未使用 AJAX 提交

    再次更新 如果有人关心的话 我之前发布的解决方案由于某种原因停止工作 我在 ajax 请求中包含了 beforeSend 并将验证表单的 js 部分粘贴到其中 现在就像一个魅力 form on submit function e e pre
  • Jquery 动画与 CSS 浮动

    我的代码有问题 宽度似乎可以工作 但浮动没有 这里是 这是一个例子 http jsfiddle net v82ck http jsfiddle net v82ck 问题 悬停时菜单上的浮动属性不会改变 我希望每个菜单元素下方的线在悬停该菜单
  • Atom“自动完成”不起作用

    因此 当您安装 Atom 时 autocomplete 会随其一起提供 并且默认情况下处于启用状态 当我编写代码时 什么也没有显示 为什么 是否需要配置任何文件才能正常工作 In autocomplete plus settings pag
  • Backbone-relational 无法实例化两个 RelationalModel 对象

    我正在尝试实现 BackboneRelational 并不断获得 无法实例化多个 Backbone RelationalModel 每种类型都有相同的 ID class App Models User extends Backbone Re
  • 如何最好地实现多个重叠元素的翻转和推出事件?

    Problem 我正在开发一个网站 其中有一个 拨号盘 显示代表伞式公司不同部门的多个选项卡 目前我已经用 HTML CSS 准备好了一切 每个选项卡的定位 内圈处于较高位置z index因为选项卡在滚动时需要向外动画 我可以实现这部分 选
  • 使用JS将图像的特定背景颜色设置为透明

    我正在使用以下代码来修改图像的透明度 然而 我想做的只是修改图像的背景颜色并将其 alpha 通道设置为 0 而不是整个图像 以下代码将整个图像的 Alpha 透明度设置为 0 var ctx this data getContext 2d
  • HTML5 拖放 - 没有透明度?

    当我将一个元素拖放到页面上时 该元素会变成 幻影 基本上它获得了一些透明度值 有什么办法可以做到吗opacity 1 看来是做不到了 拖动的元素被放入具有自己的不透明度 低于 1 的容器中 这意味着虽然您可以降低拖动元素的不透明度 但您无法
  • Node.js 和 Express:异步操作后如何返回响应

    我是 Node js 新手 所以我仍然对异步函数和回调很感兴趣 我现在的难题是如何在异步操作中从文件读取数据后返回响应 我的理解是发送回复的工作方式如下 这对我有用 app get search function req res res s
  • 获取键盘事件中的鼠标位置

    我试图在用户按住 Shift 键时出现选择轮 滚轮应以鼠标位置为中心 然而当我测试这个时 pageX and clientX两者在事件对象上都未定义 是否可以通过键盘事件获取鼠标坐标 不 只需跟踪mousemove事件并持续保存当前位置 以
  • 如何在流程图中间隔刻度线?

    我下面有一个流程图 您将看到标签被压缩 我想使刻度之间的宽度确保显示所有标签 标记如下 div div class graph info a href span span a a href class active span span a
  • Phonegap 图像未显示

    我无法让图像在我的phonegap 版本中正常工作 我读过绝对路径可能不起作用 所以我尝试了绝对路径和相对路径 但仍然没有运气 我包括这样的图像
  • 单击窗口后才检测到 keydown

    在我的 Web 应用程序中 我有一个用于打开菜单的键的事件侦听器 仅当我单击页面上的任意位置后 此功能才可以正常工作 我尝试将焦点添加到窗口加载 但这仍然不会让 keydown 函数运行 直到我单击页面上的某个位置之后 有谁知道这是否可能
  • 如何在变量名中使用变量

    所以我正在使用这样的 json 变量 opponentInvData item1 它包含项目 1 到 6 我需要动态访问不同的项目并将它们设置为空 itemNum 是我需要访问的特定项目 我正在尝试使用 eval 函数 var itemNu
  • 如何检查摘要周期是否稳定(又名“Angular 完成编译了吗?”)

    tl dr 最初的问题是 如何在每个摘要周期触发回调 但潜在的问题更有趣 因为这回答了两个问题 所以我继续修改了标题 Context 在解决了所有依赖项 nginclude API 调用等之后 我试图控制 Angular 何时完成 HTML
  • JavaScript 右移负数

    这是片段 var i 101 console log 101 i toString 2 console log 101 gt gt 1 i gt gt 1 toString 2 var l 101 console log 101 l toS
  • 垃圾收集器不适用于 NodeJS / Chrome 中的类型化数组

    我最初将其记录为原项目中的一个问题 https github com nodejs help issues 3590 它立即转移到帮助主题 没有很好的解释 所以现在我想在这里提问 如果我们在 NodeJS v14 v16 v17 中运行以下
  • addEventListener keydown 不起作用

    我在互联网上找到了一些基本的 Pong 代码 并尝试添加按键 代码在这里 http cssdeck com labs ping pong game tutorial with html5 canvas and sounds http css
  • 将元素添加到 D3 圆包节点

    我正在尝试制作一个可缩放的圆形包装图 我希望每个子圆圈包含一个较小的图表 该图表始终具有相同的结构 即 4 列 只有条形的高度会改变 我尝试添加一个简单的rect到目前为止我的图表 但矩形没有添加到圆圈中并且是静态的 JS var marg

随机推荐