解决vue-cli项目开发运行时内存暴涨卡死电脑问题


Posted in Javascript onOctober 29, 2019

最近开发一个vue项目时遇到电脑卡死问题,突然间系统就非常卡,然后卡着卡着就死机了,鼠标也动不了了,只能冷启动。而且因为是突然卡死,没来得及打开任务管理器。

最开始以为是硬盘的问题,但是在卡死几次后,就想到把任务管理器开着玩项目,看看到底是不是哪个程序把硬盘或者CPU占满了导致的卡死。经过一番排查,发现是node.js进程的内存一直在暴涨,内存直接100%,然后系统将所有休眠进程换到虚拟内存,但是还是不够,就一直换直到崩盘,硬盘也被占满100%。

这时候我才知道是运行项目开发环境导致的。然后想到前段时间更新了项目的依赖(更新前没发生过内存爆的问题),就逐一排查,发现是

解决vue-cli项目开发运行时内存暴涨卡死电脑问题

 这三个依赖的问题。如果强制版本号为3.10.0,如上图中那样,就不会发生问题。如果改为"^3.10.0",就会发生问题。

记录下遇到的这个问题,分享给大家,也给自己加深一下印象。

SASS预处理器推荐:

因为众所周知的node-sass在windows系统上的一系列(cao)问(dan)题,我推荐大家使用dart-sass(包名为"sass"),完爆node-sass。(也可参考sass-loader官方github的readme)

附上我的项目的整个依赖:

{
"dependencies": {
    "@dclovec/ts-tools": "^1.0.3",
    "@types/echarts": "^4.1.10",
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "echarts": "^4.2.1",
    "element-ui": "^2.11.1",
    "vue": "^2.6.10",
    "vue-amap": "^0.5.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "3.10.0",
    "@vue/cli-plugin-typescript": "3.10.0",
    "@vue/cli-service": "3.10.0",
    "compression-webpack-plugin": "^3.0.0",
    "sass": "^1.22.9",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^2.1.2",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  }
}

总结

以上所述是小编给大家介绍的解决vue-cli项目开发运行时内存暴涨卡死电脑问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
重载toString实现JS HashMap分析
Mar 13 Javascript
js原型链原理看图说明
Jul 07 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 #Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 #Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 #Javascript
JS操作json对象key、value的常用方法分析
Oct 29 #Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 #jQuery
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 #Javascript
js单线程的本质 Event Loop解析
Oct 29 #Javascript
You might like
PHP环境搭建最新方法
2006/09/05 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php命令行模式代码实例详解
2021/02/26 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
Webpack的dll功能使用
2018/06/28 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Vue实现按钮级权限方案
2019/11/21 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python opencv之分水岭算法示例
2018/02/24 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
小学生成长感言
2014/01/30 职场文书
淘宝活动策划方案
2014/02/06 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
考试作弊检讨书
2014/10/21 职场文书
学校百日安全活动总结
2015/05/07 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python