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

Posted 2022-06-02 博读代码

前言

“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 一次，发现错误还是存在。

​

难道是刚才犯困不小心给代码打了个断点？或者是在浏览器中给运行过程打了个 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 实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！