解决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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
js实现简单的贪吃蛇游戏
Apr 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
php获取文件内容最后一行示例
2014/01/09 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
javascript实现时钟动画
2020/12/03 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python实现简易动态时钟
2018/11/19 Python
python 中xpath爬虫实例详解
2019/08/26 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
网站美工岗位职责
2014/04/02 职场文书
组织鉴定材料
2014/06/02 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书