解决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复制插件Zero使用介绍
Mar 19 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
关于uniApp editor微信滑动问题
Jan 15 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
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python生成圆形图片的方法
2020/03/25 Python
Python 读写文件的操作代码
2018/09/20 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
性能服装:HYLETE
2018/08/14 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
财务简历的自我评价
2014/03/05 职场文书
绿化工程实施方案
2014/03/17 职场文书
颐和园导游词
2015/01/30 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
高老头读书笔记
2015/06/30 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL