详解基于node的前端项目编译时内存溢出问题

前段时间公司有个基于vue的项目在运行npm run build的时候会报内存溢出，今天在某个技术流交群也有位小伙伴基于angular的项目也出现了这个问题，所以查了一些相关的资料总结了一下，下面会详细说明前端三大框架编译时遇到这个问题具体怎么解决。首先看我模拟出的报错内容

具体截图如下

里面有句关键的话，CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足，这里说的 JavaScript 其实就是 Node，我们都知道 Node 是基于V8引擎，在一般的后端开发语言中，在基本的内存使用上没有什么限制，但是我去查阅了相关的资料才发现，在 Node 中通过 JavaScript 使用内存时只能使用部分内存（64位系统下约为1.4 GB，32位系统下约为0.7 GB），这就是我们编译项目时为什么会出现内存泄露了，因为前端项目如果非常的庞大，webpack 编译时就会占用很多的系统资源，如果超出了V8对 Node 默认的内存限制大小就会出现刚刚我截图的那个错误了，那怎么解决呢？V8依然提供了选项让我们使用更多的内存。Node 在启动时可以传递 --max-old-space-size 或 --max-new-space-size 来调整内存大小的使用限制，示例如下

node --max-old-space-size=1700 test.js // 单位为MB
// 或者
node --max-new-space-size=1024 test.js // 单位为KB

上述参数在V8初始化时生效，一旦生效就不能再动态改变。如果遇到 Node 无法分配足够内存给 JavaScript 的情况，可以用这个办法来放宽V8默认的内存限制，避免在执行过程中稍微多用了一些内存就轻易崩溃，既然知道了解决办法那就好办了，下面来分别详细说明三大框架下的具体操作。

Vue

先说vue，因为vue是最简单的，因为基于 vue-cli 生成的项目，vue没有把 package.json 里面 scripts 字段的脚本命令的node命令隐藏起来，我们直接把上面v8提供的选项参数直接写入scripts 字段的 node 命令后就好了，示例如下

"build": "node --max_old_space_size=4096 build/build.js"

直接在 node 后面写上 --max_old_space_size=4096 就好了，我这里设置的内存大小是4G,这个具体的大小可以根据自己的项目情况来设置就好了。然后再重新运行 npm run build 就可以正常打包构建了。

React

下面来说说 react ，首先如果自己的 react 项目的开发打包环境是自己搭建的话，那解决方法就和上面的 vue 一样，在 node 命令后面加上 --max_old_space_size=4096 就好了，如果是基于 react-cli 生成的项目那就接着看吧，基于react-cli 生成的项目我们发现package.json 里面 scripts 字段的内容如下

"scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject"
}

这个就和 vue-cli 不一样了，运行npm run build的时候跑的实际代码是 react-scripts build, 这个脚本是来源于哪里呢，我们打开项目根目录mode_modeles文件夹，会看到一个.bin的目录，react-scripts脚本就定义在这里，在.bin目录下可以找到一个叫react-scripts的文件，打开这个文件，我们发现里面就是一些javascript代码，这个代码的首行有些特殊，我们可以看到#!/usr/bin/env node一行这样的代码，它的意思就是，用当前电脑/usr/bin/env目录下的node来运行该文件里面的javascript代码，看到这里我们都明白了，回到我们最初要解决的问题，我们可以把--max_old_space_size=4096这行代码写在#!/usr/bin/env node后面，#!/usr/bin/env node --max_old_space_size=4096，这样就好了，我们的内存溢出问题也就解决了。

Angular

最后开始说 angular ，当然这里说的 angular 是 angular 的最新版本不是angularjs，写angular应用我们一般也都会用angular-cli来搭建项目，如果是自己搭建的开发编译那解决办法和上面的vue是一样的了。用angular-cli来生成的项目也和react一样，cli把node命令也隐藏起来了，package.json 里面 scripts 字段的内容如下

"scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
}

这里的ng命令也和react一样，定义在项目根目录mode_modeles文件夹下的.bin目录里面，.bin目录下我们能找到一个叫ng的文件，在该文件的首行写上#!/usr/bin/env node --max_old_space_size=4096，这样也就可以解除v8对node的内存使用限制了。

参考

深入浅出Node.js

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# nodejs  # 内存溢出  # node  # 编译内存溢出  # JS前端性能优化解决内存泄漏页面崩溃  # 中高级前端必须了解的JS中的内存管理(推荐)  # Meta开源JavaScript内存泄漏监测工具MemLab安装使用  # JavaScript内存管理与闭包实例详解  # JS前端的内存处理的方法全面详解  # 就好了  # 自己的  # 也就  # 三大  # 这个问题  # 详细说明  # 一个叫  # 会报  # 约为  # 目录下  # 解决办法  # 写上  # 该文件  # 就会  # 在这里  # 也有  # 有个  # 那就  # 让我们  # 就不 

相关文章： 平台云上自助建站如何快速打造专业网站？  已有域名如何免费搭建网站？  *服务器网站为何频现安全漏洞？  如何选择网络建站服务器？高效建站必看指南  如何在橙子建站中快速调整背景颜色？  广德云建站网站建设方案与建站流程优化指南  建站之星2.7模板快速切换与批量管理功能操作指南  如何确保FTP站点访问权限与数据传输安全？  非常酷的网站设计制作软件,酷培ai教育官方网站？  XML的“混合内容”是什么 怎么用DTD或XSD定义  威客平台建站流程解析：高效搭建教程与设计优化方案  如何在万网开始建站？分步指南解析  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  如何通过虚拟机搭建网站？详细步骤解析  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  如何选择香港主机高效搭建外贸独立站？  盘锦网站制作公司,盘锦大洼有多少5G网站？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  如何在IIS服务器上快速部署高效网站？  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  建站之星五站合一营销型网站搭建攻略，流量入口全覆盖优化指南  ,南京靠谱的征婚网站？  免费制作小说封面的网站有哪些,怎么接网站批量的封面单？  php能控制zigbee模块吗_php通过串口与cc2530 zigbee通信【介绍】  高性能网站服务器配置指南：安全稳定与高效建站核心方案  详解jQuery中基本的动画方法  网站制作价目表怎么做,珍爱网婚介费用多少？  制作网站的软件免费下载,免费制作app哪个平台好？  制作企业网站建设方案,怎样建设一个公司网站？  如何快速生成专业多端适配建站电话？  英语简历制作免费网站推荐,如何将简历翻译成英文？  如何挑选优质建站一级代理提升网站排名？  视频网站app制作软件,有什么好的视频聊天网站或者软件？  如何通过虚拟主机快速搭建个人网站？  教学论文网站制作软件有哪些,写论文用什么软件 ？  如何快速查询网站的真实建站时间？  建站主机解析：虚拟主机配置与服务器选择指南  打鱼网站制作软件,波克捕鱼官方号怎么注册？  三星网站视频制作教程下载,三星w23网页如何全屏？  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  外贸公司网站制作,外贸网站建设一般有哪些步骤？  测试制作网站有哪些,测试性取向的权威测试或者网站？  如何快速生成高效建站系统源代码？  黑客如何通过漏洞一步步攻陷网站服务器？  建站之星客服服务时间及联系方式如何？  建站之星CMS五站合一模板配置与SEO优化指南  安徽网站建设与外贸建站服务专业定制方案  如何在万网主机上快速搭建网站？  如何用wdcp快速搭建高效网站？  建站之星如何防范黑客攻击与数据泄露？