解决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压缩工具 yuicompressor 使用教程
Mar 31 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 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
用cookies来跟踪识别用户
2006/10/09 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
js实现简单进度条效果
2020/03/25 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
使用python实现接口的方法
2017/07/07 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python中作用域的深入讲解
2018/12/10 Python
python基于event实现线程间通信控制
2020/01/13 Python
python3 xpath和requests应用详解
2020/03/06 Python
利用Python优雅的登录校园网
2020/10/21 Python
python selenium 获取接口数据的实现
2020/12/07 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
给导游的表扬信
2014/01/10 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
校本课程教学计划
2015/01/19 职场文书
三八妇女节致辞
2015/07/31 职场文书