解决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直接编辑当前cookie的脚本
Sep 14 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
DWR中各种java方法的调用
May 04 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
初学者AngularJS的环境搭建过程
Oct 27 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实现图片缩放功能类
2013/12/18 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
lib.utf.js
2007/08/21 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
Python探索之Metaclass初步了解
2017/10/28 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
python的json包位置及用法总结
2020/06/21 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
struct和class的区别
2015/11/20 面试题
个人自我鉴定怎么写
2013/10/28 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
承诺书格式
2014/06/03 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
离职信范文
2015/06/23 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers