electron-vue开发环境内存泄漏问题

问题描述

在开发环境中，修改主进程保存后，每次保存会多出一到两个electron进程，只是出现的频率较低

排查过程

1、首先先看了webpack.main.config.js，然而并没有发现有什么异样的地方，配置了只启动一个应用程序，每次退出前也使用app.exit()强制退出，然而并没有任何好转，遂新建一个项目，用来测试
2、在创建完毕后（electron v4.0.0），发现每次保存并不是都会出现一个新的进程，经过多次测试后，发现问题出在保存完后，主进程未生成成功，然后再次保存，于是进程创建了多次，但是只杀死了最开始的进程，造成内存泄漏。
3、在dev-runner.js中找到了关于杀死进程的方法

if (electronProcess && electronProcess.kill) {
       manualRestart = true
       process.kill(electronProcess.pid)
       electronProcess = null
       startElectron()

       setTimeout(() => {
         manualRestart = false
       }, 5000)
     }

好吧他是直接通过调用process.kill来杀死进程，然后造成这个问题，遂进行了修改，修改后代码如下，注意引入exec，然后将延时器删除

if (electronProcess && electronProcess.kill) {
        manualRestart = true
        const pid = electronProcess.pid
        exec(`TASKKILL /F /IM electron process`, function (err, data) {
          if (err) console.log(err)
          else console.log('kill pid: ' + pid + ' success!')
          electronProcess = null
          startElectron()
          manualRestart = false
        })
      }

内存泄漏识别方法

Chrome

操作步骤：

打开开发者工具，选择Performance面板
点击勾选Memory，点击录制按钮（或Ctrl+E）
在页面上模拟用户操作
操作完成后点击Stop(Ctrl+E)完成录制

Node命令

使用Node提供process.memoryUsage()方法返回一个对象，包含Node进程的内存占用信息，该对象包含四个字段。

res(resident set size):所有内存占用，包括指令区和堆栈
heapTotal: “堆”占用的内存，包括用到的和没用到的
heapUsed: 用到的堆的部分，判断内存泄漏以该字段为准
external: V8 引擎内部的C++对象占用的内存

优化点收集

速度

在本地的后台进程中完成大部分的工作
即时加载数据。你从不需要等待数据通过网络加载，因为数据是直接从本地的数据源加载的。这一点会使速度大幅提升。
极少需要缓存。由于所有数据都可以即时获取，客户端不需要太关心缓存。通常，web app 需要创建许多本地状态，才能获得较好的性能，而这正是内存膨胀的一个原因。
离线采用SQLite

性能

创建一个常见的节点进程在后台运行服务器与服务器进行交互
逻辑放在node层进行ipc通信处理逻辑
在开发模式下，它可以在另一个调试窗口内运行服务器，而不是将服务器视为一个后台进程。

调试

主进程调试

./node_modules/.bin/electron . --inspect=8899

默认会监听 9229 端口，现在我们监听了8899端口，应用启动后，在 Chrome 浏览器（或其他基于 Chromium 开发的浏览器）中打开 chrome://inspect 即可看到对应的调试会话，点击会话链接即可打开 devtools 进行调试。

生产环境调试
下载最新版本安装并打开 Debugtron 后，会检测并展示所有已安装的 Electron 应用：

Electron 的调试方案已经比较完善，在开发环节，主进程和渲染进程都能够很方便地打开 devtools 进行调试；而且这个工作流还可以深度集成到 VSCode 中，提升开发体验。

后文

这是现在暂时发现的问题，如果发现新的业务代码问题导致内存泄漏时候再更新

bajiu

electron-vue开发环境内存泄漏问题

问题描述

排查过程

内存泄漏识别方法

优化点收集

调试

后文