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

Node.js前端项目编译内存溢出问题解析

近期，公司一个基于Vue的项目在执行npm run build命令时频繁出现内存溢出报错。今日在技术交流社区中，也有开发者反馈其Angular项目遭遇了同样的问题。为此，我查阅了相关资料并进行了总结，下文将详细说明针对前端三大主流框架在编译阶段遇到此类内存溢出问题的具体解决方法。首先，展示我模拟出的报错内容如下。

具体报错截图如下

报错信息中有一句关键提示：CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory，即JavaScript堆内存不足。这里的JavaScript实际上指的是Node.js运行时环境。众所周知，Node.js基于V8引擎构建。在大多数后端开发语言中，基本内存使用通常没有严格限制，但查阅相关资料后发现，Node.js通过JavaScript使用内存时存在默认上限（64位系统下约为1.4 GB，32位系统下约为0.7 GB）。这正是前端项目编译时出现内存溢出或泄漏现象的根本原因：当项目规模庞大，Webpack编译过程占用大量系统资源并超出V8对Node.js的默认内存限制时，便会触发上述错误。那么该如何解决？V8引擎提供了相关选项以允许使用更多内存。Node.js在启动时可通过传递--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.js无法为JavaScript分配足够内存的情况，可采用此方法放宽V8默认内存限制，避免因执行过程中内存使用稍有增加而导致程序崩溃。既然明确了解决思路，接下来将分别详细说明三大框架下的具体操作步骤。

Vue项目解决方案

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即可，此处设置的内存大小为4GB，具体数值可根据实际项目需求进行调整。随后重新运行npm run build命令，即可正常完成打包构建。

React项目解决方案

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。该脚本源自何处？打开项目根目录下的node_modules文件夹，可见一个.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情况一致，定义在项目根目录node_modules文件夹下的.bin目录中。在.bin目录下可找到一个名为ng的文件，在该文件首行写入#!/usr/bin/env node --max_old_space_size=4096，即可解除V8对Node.js内存使用的限制。

参考

深入浅出Node.js

以上为本文全部内容，希望对各位的学习有所帮助，也欢迎大家多多支持本站。