解决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 Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
vue.js开发环境搭建教程
May 04 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
简述ES6新增关键字let与var的区别
Aug 23 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
深入file_get_contents与curl函数的详解
2013/06/25 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python深入学习之上下文管理器
2014/08/31 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
如何用Python合并lmdb文件
2018/07/02 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
关于廉洁的广播稿
2014/01/30 职场文书
采购意向书范本
2014/03/31 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
公司离职证明样本
2014/09/13 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
家长学校教学计划
2015/01/19 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
职工食堂管理制度
2015/08/06 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
详解nginx进程锁的实现
2021/06/14 Servers