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


Posted in Javascript onOctober 10, 2019

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的版本更新记录中并没有发现那条更新记录会导致这个问题,时间有限,也没有去看到底在哪个版本后造成这个问题,技艺拙劣,始终没有找到出现的原因

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

Javascript 相关文章推荐
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
Vue使用NProgress的操作过程解析
Oct 10 #Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 #Javascript
使用vscode快速建立vue模板过程详解
Oct 10 #Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 #Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 #Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 #Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 #Javascript
You might like
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
js树形控件脚本代码
2008/07/24 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
好矿嫂事迹材料
2014/01/21 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
同意迁入证明模板
2014/10/26 职场文书
新闻简讯格式及范文
2015/07/22 职场文书