解决webpack打包、编译、热更新Node内存不足问题
日常先上结论
- 上班的打工开发可以直接在这里看解决方案
- 修复young object promotion failed Allocation failed - JavaScript heap out of memory报错,全局安装increase-memory-limit这个包就可以解决,安装完后在项目控制台执行increase-memory-limit,然后再运行项目就完事啦,如果遇到其他报错,可以直接看下面第2项解决方案。
- 所有Webpack编译、打包、热更新等等问题,只要是遇到上述报错都可以用这个解决
问题背景
- 最近接手一个公司买过来的项目(烫手山芋),项目规模比常规后台管理项目稍大一点。刚接手一顿操作
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
排查问题
- 往上看控制台报错信息,看到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优化策略。
打开任务控制台,看内存占用还有剩余呀。那不是电脑内存不够,那就是Node可调用的系统内存不够用了
打开百度一搜
Node可调用系统内存有多少
,果然出来Node基于V8引擎,V8在64位系统最大内存为1.4G左右,而在32位系统只有0.7G左右
既然知道了问题所在,那么就好解决了,面向百度编程,百度搜索
如何解决Node运行内存不足的问题
马上就有了解决办法,increase-memory-limit可以提高Node占用内存。npm i -g increase-memory-limit
安装包,然后在项目目录执行increase-memory-limit
,执行成功再执行npm run dev又来了一个报错,果然程序是一种修复一个BUG要再修复其他十几个BUG的东西,可以按如下操作解决问题,执行的时候多了一个""系统识别不了,去掉就可以了
好啦,问题解决就到这里啦,又可以开心的摸鱼了,感谢观看!!!
解决webpack打包、编译、热更新Node内存不足问题相关推荐
- 解决webpack打包bootstrap报字体不能解析问题
解决webpack打包bootstrap报字体不能解析问题 参考文章: (1)解决webpack打包bootstrap报字体不能解析问题 (2)https://www.cnblogs.com/zero ...
- 彻底解决Webpack打包慢的问题
彻底解决Webpack打包慢的问题 参考文章: (1)彻底解决Webpack打包慢的问题 (2)https://www.cnblogs.com/yaoyinglong/p/7490351.html 备 ...
- 魔坊APP项目-17-种植园,商城页面、服务端提供商品api,解决App打包编译以后的跨域限制、客户端获取商品列表并进行展示,集成Alipayplus模块完成支付
种植园 一.商城页面 orchard.html,代码: <!DOCTYPE html> <html> <head><title>用户中心</tit ...
- 解决webpack打包错误问题
解决webpack打包错误问题 1.webpack3.X版本打包命令 webpack .\src\main.js .\dist\bundle.js 2.webpack4.X版本打包命令 webpack ...
- webpack配置及热更新原理
1:配置webpack 1:新建一个vue项目: 进入目录,在终端创建: vue create 项目名: 2:创建新文件 对应的文件目录src下新建存放css文件index.css,项目的入口文件ma ...
- webpack和vue热更新
目录 webpack一些概念介绍 webpack热更新流程 1. 启动阶段 ①->②->A->B 2. 更新阶段 ①->②->③->④ vue的组件热更新模块 总结 ...
- 解决webpack打包样式url()背景图片问题
定位错误 项目使用webpack4进行编译,打包后的样式中使用url方法指定的背景图片不能够正常显示 源码戳这里 .bgurl{background-image: url('/images/abc.j ...
- webpack 打包编译优化之路
一.摘要 从最初的html css js 混合编程,到分离编程.再到用上各种框架 react vue angular , 伴随着框架和模块化的概念铺开,打包编译工具渐渐浮出水面.从2013年开始使用打 ...
- cordova打包app热更新问题
定义: 基于 cordova 框架能将web应用 (js, html, css, 图片等) 打包成 App.当 App 在终端上安装后,不需要重新下载app,实现内壳更新. 原理:1.在项目根目录的c ...
最新文章
- Microbiome:所谓的“富集培养”获得的微生物真的都是被“富集”出来的吗?(一作解读)...
- 三周写出高性能的Python代码,这些小技巧你值得一试。
- Vue指令之v-on的缩写和事件修饰符||.stop 和 .self 的区别
- C++ : STL常用算法: inner_product , sort ,itoa
- python面部颜色分析_Python图像处理之颜色的定义与使用分析
- 函数的参数对象$event的使用和利用他找到事件对象
- 基于LEAP模型的能源环境发展、碳排放建模预测及不确定性分析
- Ragel——基于有限状态机用于产生源码的编译器
- Google搜索引擎算法研究
- linux没有网卡配置文件,linux找不到网卡配置文件解决办法
- GoLang之接口interface
- BIOS设置中功能的翻译及介绍
- linux中ping命令停不下来解决方案
- SWT定位– setBounds()或setLocation()
- Spring Cloud微服务简介
- 户外耳机品牌哪个好、最新的户外耳机品牌排行
- TI公司三大系列DSP内部结构之比较
- 纯css控制文字显示隐藏
- 享誉全球的 Java 经典著作《Java核心技术》
- Oracle中V$SESSION等各表的字段解释,Oracle官方解释
热门文章
- 【echarts tooltip 固定位置】
- 关于 C++ 依赖管理
- Hive sql常用语句
- java程序员面试宝典(刘磊版)笔记
- 炉石传说 古墓惊魂 灾祸领主 英雄技能
- 用matlab从rosbag文件里读取rbg图片和depth图片
- filezilla 配置
- Compare线刷包与卡刷包
- 使用hugging face提供的预训练模型,报错:ImportError: cannot import name ‘DatasetInfo‘ from ‘huggingface_hub.hf_api
- 【数据结构+算法】浙传OJ Contest 2290:13信息1 Java 6 问题 F: Hexagon Game