0
点赞
收藏
分享

微信扫一扫

【electron学习笔记】在electron中,npm run dev内存溢出的解决方法

前言

“paused before potential out-of-memory crash”,相信有不少的小伙伴在开发过程中都碰到过这个问题。当遇上这个问题的时候,我们通常都会先通过网络搜索解决方案,但也并非每次都能找到解决方法。

试幻想一下这个开发情景:某个阳光灿烂、微风相伴的清晨,我们一如既往地打开 vscode 进行代码编写,运行 npm run dev 的时候,一切就像太阳每天从东边起来,从西边落下那样的正常。直到下午,一只大鸟划破了白天的宁静,随即 chrome 提示如下错误:paused before potential out-of-memory crash。

浏览器显示如下:

【electron学习笔记】在electron中,npm run dev内存溢出的解决方法_内存溢出

对于这种错误的提示,通常 chrome 浏览器会直接打个断点 “Paused in Debugger” ,当我顺着去做单步调试时,发现整个控制台都卡死了,然后 ctrl+c 将 npm 中断运行,接着再重新 npm run dev 一次,发现错误还是存在。

难道是刚才犯困不小心给代码打了个断点?或者是在浏览器中给运行过程打了个 breakpoint?经过细致检查后发现这并非自己打的断点问题,于是很快将解决方案的思路转到代码上。

解决方案

方案一

检查代码中是否存在死循环的语句,幸好代码文件不算大,都是以组件方式引入,这就提示了我们,平时在开发过程中,一定要注意封装,不然调试定位错误将十分费劲。

​反复检查了几次,发现代码中并不存在死循环。那有没有可能是电脑文件错误?于是在重启后,继续 npm run dev,发现错误依旧,我开始怀疑人生,着手思考其他解决方法。


方案二

翻阅各种资料也没找到相应的办法,于是继续研究,是否调用接口返回的数据量过大引致内存溢出?但是当检查接口返回数据时,一个页面的接口数据返回量也不到10KB,是无法引发这种问题的。还尝试过设置虚拟内存等等,也是无法解决。

实在没辙,于是把代码转移到别的电脑尝试运行,出乎意料的是在别的电脑环境运行竟然没有报错,那一刻我仿佛看到了光。现在能肯定代码是没问题的,应该是编译环境出了问题。

于是,打开浏览器的控制台,切换至 memory 选项卡中观察,发现报错的电脑里,electron 的内存占用率高达1300MB,而正常运行代码的那台电脑,内存占用率才26MB。

顺着这个思路往下检查,发现每次断点都是定在 node_moudles 包中 conf 文件下的 index.js 里面,代码如下:

【electron学习笔记】在electron中,npm run dev内存溢出的解决方法_npm run dev_02


定位是在 set 方法和 get 方法里抛出了异常,但浏览器没有给出更多的提示,就卡住了。我开始考虑,是否因为代码里面存在着 electron-store 这样的插件进行持久化操作,而某个文件太大导致内存读取时发生溢出?

顺藤摸瓜,找到 User\AppData\Roaming\Electron 文件夹下,发现里面的 config.json 居然高达480M,而且 npm run dev 一下就会顺着上一个config.json 文件叠加生成一个全新的 config.12783748afe3.json文件。

在正常情况下,这个文件应该是几KB的。

【electron学习笔记】在electron中,npm run dev内存溢出的解决方法_npm run dev_03

当把这几个 config.json 文件删除后,重新 npm run dev 一下,运行又恢复了正常。


小结

最后,建议大家不要长时间开着 npm run dev 写代码,这样做可能会引发一些未知的错误。以上就是本期关于解决 npm run dev 内存溢出的分享,希望能给大家带来帮助。


下期给大家分享更多 electron 实战中的点滴,如果大家对此感兴趣,欢迎各位关注、留言,大家的支持就是我的动力!

举报

相关推荐

0 条评论