锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识解决方法electron学习

一万年来谁著史，三千里外欲封侯。这篇文章主要讲述electron学习笔记在electron中，npm run dev内存溢出的解决方法相关的知识，希望能为你提供帮助。
前言
“paused before  potential out-of-memory crash”，相信有不少的小伙伴在开发过程中都碰到过这个问题。当遇上这个问题的时候，我们通常都会先通过网络搜索解决方案，但也并非每次都能找到解决方法。
?
试幻想一下这个开发情景：某个阳光灿烂、微风相伴的清晨，我们一如既往地打开 vscode 进行代码编写，运行 npm run dev 的时候，一切就像太阳每天从东边起来，从西边落下那样的正常。直到下午，一只大鸟划破了白天的宁静，随即 chrome 提示如下错误：paused before potential out-of-memory crash。
?
浏览器显示如下：

对于这种错误的提示，通常 chrome 浏览器会直接打个断点 “Paused in Debugger” ，当我顺着去做单步调试时，发现整个控制台都卡死了，然后 ctrl+c 将 npm 中断运行，接着再重新 npm run dev 一次，发现错误还是存在。
?
【electron学习笔记在electron中，npm run dev内存溢出的解决方法】难道是刚才犯困不小心给代码打了个断点？或者是在浏览器中给运行过程打了个 breakpoint？经过细致检查后发现这并非自己打的断点问题，于是很快将解决方案的思路转到代码上。
?
解决方案
方案一检查代码中是否存在死循环的语句，幸好代码文件不算大，都是以组件方式引入，这就提示了我们，平时在开发过程中，一定要注意封装，不然调试定位错误将十分费劲。
?反复检查了几次，发现代码中并不存在死循环。那有没有可能是电脑文件错误？于是在重启后，继续 npm run dev，发现错误依旧，我开始怀疑人生，着手思考其他解决方法。


方案二翻阅各种资料也没找到相应的办法，于是继续研究，是否调用接口返回的数据量过大引致内存溢出？但是当检查接口返回数据时，一个页面的接口数据返回量也不到10KB，是无法引发这种问题的。还尝试过设置虚拟内存等等，也是无法解决。
实在没辙，于是把代码转移到别的电脑尝试运行，出乎意料的是在别的电脑环境运行竟然没有报错，那一刻我仿佛看到了光。现在能肯定代码是没问题的，应该是编译环境出了问题。
于是，打开浏览器的控制台，切换至 memory 选项卡中观察，发现报错的电脑里，electron 的内存占用率高达1300MB，而正常运行代码的那台电脑，内存占用率才26MB。
顺着这个思路往下检查，发现每次断点都是定在 node_moudles 包中 conf 文件下的 index.js 里面，代码如下：



定位是在 set 方法和 get 方法里抛出了异常，但浏览器没有给出更多的提示，就卡住了。我开始考虑，是否因为代码里面存在着 electron-store 这样的插件进行持久化操作，而某个文件太大导致内存读取时发生溢出？
顺藤摸瓜，找到 User\\AppData\\Roaming\\Electron 文件夹下，发现里面的 config.json 居然高达480M，而且 npm run dev 一下就会顺着上一个config.json 文件叠加生成一个全新的 config.12783748afe3.json文件。
?在正常情况下，这个文件应该是几KB的。

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


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


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

    推荐阅读


    上一篇：JVS开源框架系列（??事件集成·自动化帮助?「含软开企服的开源地址」）

    下一篇：Android技术分享| 利用Kotlin协程，多任务并行，测试RTM SDK性能