FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory问题解决

昨天晚上同事突然找我说前端打包失败，我登上去查看发现报错如下

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

其实这就是node编译的内存溢出了。原因就是打包文件过大，超出了内存的限制大小造成了编译中断。

这里我们其实也两个解决思路：

思路一：修改 package.json 中的 “build” 加大内存，示例如下

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "set NODE_ENV=production && node --max_old_space_size=8000 build/build.js",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run e2e"
  },

思路二：使用 increase-memory-limit 插件，增加node服务器内存限制

1、安装npm install --save-dev increase-memory-limit

// 1. 拉取项目后
npm install

// 2. 安装
sudo npm install -g increase-memory-limit
sudo npm install -g cross-env

// 3. 执行 fix-memory-limit
npm run fix-memory-limit

// 4. 如果有就删除掉，没有跳过这步操作启动项目
node_modules@vue中的vue.cli.service.js
手动删除：--max-old-space-size=6144

// 5. 启动项目
npm run serve

PS:
遇到 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的内存使用限制了。