解决webpack打包、编译、热更新Node内存不足问题

日常先上结论

  1. 上班的打工开发可以直接在这里看解决方案
  2. 修复young object promotion failed Allocation failed - JavaScript heap out of memory报错,全局安装increase-memory-limit这个包就可以解决,安装完后在项目控制台执行increase-memory-limit,然后再运行项目就完事啦,如果遇到其他报错,可以直接看下面第2项解决方案。
  3. 所有Webpack编译、打包、热更新等等问题,只要是遇到上述报错都可以用这个解决

问题背景

  1. 最近接手一个公司买过来的项目(烫手山芋),项目规模比常规后台管理项目稍大一点。刚接手一顿操作npm i, npm run dev,安装依赖,运行项目,没有任何问题。这时候我还稍微放松了一点,心想好像这项目还没什么坑。但是当我浏览系统、熟悉业务时出现了BUG,于是回到代码打个console.log调试一下,常规操作,小问题。刚ctrl+s保存切到页面想看报错信息发现页面已经蹦了,眉头一皱,感觉不对,console.log也能让页面蹦了吗?切回vscode就看到控制台红红的大字,webpack-dev-serve也蹦了。我又开始怀疑这项目了,console.log也能让项目崩溃,还能玩吗?买的别人公司的项目果然有坑。

报错信息:FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory

排查问题

  1. 往上看控制台报错信息,看到JS stacktrace、JavaScript heap out of memory,意识到应该是内存不够了
    在这里插入图片描述

PS:young object promotion failed Allocation failed - JavaScript heap out of memory
这句话的意思是JavaScript在将新生区对象提升至老生区的时候出错了 - 原因是JavaScript堆内存不够,
这里是V8对GC的优化,将堆划分为新生区和老生区,新生区就是创建不久的对象呗,老生区就是已经存在一段时间的对象,将堆空间划分为新生老生两个区是为了减少老生区的GC次数,毕竟GC也会影响程序运行,要尽量减少。具体可以自行百度V8 GC优化策略。

  1. 打开任务控制台,看内存占用还有剩余呀。那不是电脑内存不够,那就是Node可调用的系统内存不够用了
    在这里插入图片描述

  2. 打开百度一搜Node可调用系统内存有多少,果然出来Node基于V8引擎,V8在64位系统最大内存为1.4G左右,而在32位系统只有0.7G左右
    在这里插入图片描述

  3. 既然知道了问题所在,那么就好解决了,面向百度编程,百度搜索如何解决Node运行内存不足的问题马上就有了解决办法,increase-memory-limit可以提高Node占用内存。npm i -g increase-memory-limit安装包,然后在项目目录执行increase-memory-limit,执行成功

  4. 再执行npm run dev又来了一个报错,果然程序是一种修复一个BUG要再修复其他十几个BUG的东西,可以按如下操作解决问题,执行的时候多了一个""系统识别不了,去掉就可以了在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

好啦,问题解决就到这里啦,又可以开心的摸鱼了,感谢观看!!!

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vgbire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值