解决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 相关文章推荐
javascript 拖动表格行实现代码
May 05 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
php常用的工具开发整理
2019/09/26 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
jQuery遮罩层实例讲解
2017/05/11 jQuery
原生JS实现层叠轮播图
2017/05/17 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
jQuery Dom元素操作技巧
2018/02/04 jQuery
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
python下os模块强大的重命名方法renames详解
2017/03/07 Python
深入浅析python的第三方库pandas
2020/02/13 Python
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
自我鉴定四大框架
2014/01/17 职场文书
工作自我评价怎么写
2014/01/29 职场文书
婚前协议书范本
2014/04/15 职场文书
大学生见习报告总结
2014/11/04 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
慰问信范文
2015/02/14 职场文书
公积金贷款承诺书
2015/04/30 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫