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

package.json

 "dependencies": {
  "vue": "^2.5.16"
 },
 "devDependencies": {
  "ajv": "^6.5.0",
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.4",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-preset-env": "^1.7.0",
  "babel-preset-stage-0": "^6.24.1",
  "babel-register": "^6.26.0",
  "babili-webpack-plugin": "^0.1.2",
  "cfonts": "^2.1.2",
  "chalk": "^2.4.1",
  "copy-webpack-plugin": "^4.5.1",
  "cross-env": "^5.1.6",
  "css-loader": "^0.28.11",
  "del": "^3.0.0",
  "devtron": "^1.4.0",
  "electron": "3.0.0",
  "electron-builder": "^20.19.2",
  "electron-debug": "^1.5.0",
  "electron-devtools-installer": "^2.2.4",
  "file-loader": "^1.1.11",
  "html-webpack-plugin": "^3.2.0",
  "mini-css-extract-plugin": "0.4.0",
  "multispinner": "^0.2.1",
  "node-loader": "^0.6.0",
  "style-loader": "^0.21.0",
  "url-loader": "^1.0.1",
  "vue-html-loader": "^1.2.4",
  "vue-loader": "^15.2.4",
  "vue-style-loader": "^4.1.0",
  "vue-template-compiler": "^2.5.16",
  "webpack": "^4.15.1",
  "webpack-cli": "^3.0.8",
  "webpack-dev-server": "^3.1.4",
  "webpack-hot-middleware": "^2.22.2",
  "webpack-merge": "^4.1.3"
 }

electron测试版本3.0.0, 4.0.0, 4.2.6

问题描述

在开发环境中,修改主进程保存后,每次保存会多出一到两个electron进程,根据群友反馈2.0.8也是存在这个问题的,只是出现的频率较低

排查过程以及解决思路

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)
   }

4、 好吧他是直接通过调用process.kill来杀死进程,然后造成这个问题,遂进行了修改,修改后代码如下,注意引入exec,然后将延时器删除,感觉整个程序的运行速度都快了不少,哈哈哈

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

总结

在解决了问题后,去看版本更新记录,在2.0.8-3.0.0的版本更新记录中并没有发现那条更新记录会导致这个问题,时间有限,也没有去看到底在哪个版本后造成这个问题,技艺拙劣,始终没有找到出现的原因

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue使用中的内存泄漏【推荐】

    今天看到一篇关于js使用中内存泄露的文章,以及chrom浏览器查看内存泄漏的方法,决定留着.本文只截取了我认为比较重要的部分,喜欢原文的小伙伴,请点击文章下方的原文链接. 什么是内存泄露?内存泄露是指new了一块内存,但无法被释放或者被垃圾回收.new了一个对象之后,它申请占用了一块堆内存,当把这个对象指针置为null时或者离开作用域导致被销毁,那么这块内存没有人引用它了在JS里面就会被自动垃圾回收.但是如果这个对象指针没有被置为null,且代码里面没办法再获取到这个对象指针了,就会导致无法释放

  • 浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验

    引言 Memory Leak 是最难排查调试的 Bug 种类之一,因为内存泄漏是个 undecidable problem,只有开发者才能明确一块内存是不是需要被回收.再加上内存泄漏也没有特定的报错信息,只能通过一定时间段的日志来判断是否存在内存泄漏.大家熟悉的常用调试工具对排查内存泄漏也没有用武之地.当然了,除了专门用于排查内存泄漏的工具(抓取Heap之类的工具)之外. 对于不同的语言,各种排查内存泄漏的方式方法也不尽相同.对于 JavaScript 来说,针对不同的平台,调试工具也是不一样的

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

    package.json "dependencies": { "vue": "^2.5.16" }, "devDependencies": { "ajv": "^6.5.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plu

  • webpack4手动搭建Vue开发环境实现todoList项目的方法

    前言 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗? 基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!! 基于个人的时间精力问题,把本项目教程分为两部分: webpack4手动搭建Vue开发环境 (本篇文章) 手动搭建Vue项目文件夹实现t

  • Vue开发环境中修改端口号的实现方法

    Vue开发环境中修改端口号 如上图所示,在开发环境中,8080便是端口号,这也是使用Vue脚手架创建的项目运行时的默认的端口. 1.Vue 2.x config文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可. module.exports = { dev: { env: require('./dev.env'), port: 8080, // 端口号 assetsSubDirectory: 'static', assetsPublicPath: '/', pr

  • 搭建vue开发环境

    搭建vue的开发环境: 1.必须要安装nodejs 2.搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global vue-cli ( 此命令只需要执行一次 ) 3.创建项目     必须cd到对应的放项目的文件夹里,例如项目放vue文件夹里,则cd vue,然后再进行下面的命令(vue-demo01为项目名) vue init webpack vue-demo01 cd vue-dem

  • Vue开发环境跨域访问问题

    Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target:'http://192.168.1.99:8080/', changeOrigin:true, pathRewrite:{ '^/api':'' } }

  • 详解如何从零开始搭建Express+Vue开发环境

    准备工作 1. 为前端选择合适的预处理工具和资源管理工具 预处理工具又分为 js 预处理工具和 css 预处理工具.Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制,所有 js 代码文件在被 html 页面引入后将共用同一个命名空间.所以才出现了各种"标准"尝试解决这个问题,但他们都不是原生的,需要额外的工具对代码进行特殊处理.虽然 ES6 终于引入了模块机制,但以现在的浏览器支持程度,还不足以"毫无顾虑地随拿随用".所以 js 预处理工具最主要

  • 使用vue-cli+webpack搭建vue开发环境的方法

    在这里我们需要首先下载node,因为我们要用到npm包下载,是基于node的 废话不多说,我们直接进入正题 下载node,同时需要下载git,以后我们就在git上输入命令来搭建我们的vue环境 git用的是linux命令 不要问为什么,能用就行,你说是不是? windows系统,下载完git以后我们再桌面右击鼠标会看到git Bash,点开它,然后就打开了git, git有很多功能,同时git可以往github上push你的文件,github是一个很不错的仓库管理工具哦 好,我们直接开始,打开g

  • vue开发环境配置跨域的方法步骤

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问 production:产品 生产环境 development:开发 开发环境 1.开发环境设置跨域使用工具: vue-cli自带的配置配置 目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //是否跨域 // s

  • 利用Nginx处理Vue开发环境的跨域的方法

    1. 需求 本地测试域名与线上域名相同,以便正确传递 Cookie 和进行 SSO 测试. 注:由于 SSO 登录后,相关 Cookie 被加在四级域名上,因而需要做到本地测试域名和线上接口域名相同. 2. 方案 配置 Host 文件使线上域名指向 Localhost: 127.0.0.1 product.xxx.xxx.com 配置 Nginx 进行对应转发: server { listen 80; listen [::]:80; server_name ${product.xxx.xxx.c

随机推荐