解决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 相关文章推荐
通过js获取div的background-image属性
Oct 15 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 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
UCenter Home二次开发指南
2009/05/28 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
Django中使用group_by的方法
2015/05/26 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python 8种必备的gui库
2020/08/27 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
晚会开幕词
2015/01/28 职场文书
音乐教师求职信范文
2015/03/20 职场文书
法律进社区活动总结
2015/05/07 职场文书
农业项目合作意向书
2015/05/08 职场文书
小学教师教学随笔
2015/08/14 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python