node打包内存不足问题解决方式：Allocation failed - JavaScript heap out of memory

落日映苍穹つ 2022-09-13 14:28 835阅读 0赞

## 问题： ##

详细报错内容：  
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

![72d9210fc47aa6f88cb5319cc71d7821.png][]

## 解决方法1： ##

安装：

npm install -g increase-memory-limit

执行：

increase-memory-limit

备注：本方法亲测有效；

## 解决方法2： ##

export NODE_OPTIONS="--max-old-space-size=8192"

### 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`的内存使用限制了。

**具体原因分析**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAWmhhb1lpbmdDaGFvODg_size_17_color_FFFFFF_t_70_g_se_x_16][]

里面有句关键的话，

`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默认的内存限制，避免在执行过程中稍微多用了一些内存就轻易崩溃

参考：[https://segmentfault.com/a/1190000010437948][https_segmentfault.com_a_1190000010437948]（[基于node的前端项目编译时内存溢出问题][https_segmentfault.com_a_1190000010437948]）

[72d9210fc47aa6f88cb5319cc71d7821.png]: /images/20220828/3b10200c8b9e49999faff1db69604141.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAWmhhb1lpbmdDaGFvODg_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/0a941ce6c6b74eda9678905cbef9ebc6.png
[https_segmentfault.com_a_1190000010437948]: https://links.jianshu.com/go?to=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000010437948