场景

Vue项目运行时服务突然停止(Node内存溢出),需要重新npm run dev. OOM报错；

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

分析

在Node中通过JavaScript使用内存时只能使用部分内存（64位系统：1.4 GB，32位系统：0.7 GB）；

这个时候，如果前端项目非常的庞大，Webpack编译时就会占用很多的系统资源，如果超出了V8引擎对Node默认的内存限制大小时，就会产生内存泄露(JavaScript heap out of memory)的错误；

产生的常见原因

1. 全局变量引起的内存泄漏
2. 闭包引起的内存泄漏
3. dom清空或删除时，事件未清除导致的内存泄漏
4. 被遗忘的计时器或回调函数

调试方法

打开f12进入Memory，选中heap snapshot（堆快照），每进行一次操作就点一下左上角圆点，比较两次内存有没有回收，若有， 找到引用的这个对象，手动GC就好啦 参考：一个Vue页面的内存泄露分析 (opens new window)

解决方法

升级最新nodejs版本

从现在的node10x升级到node14x

max_old_space_size[推荐]

直接覆盖node

简单粗暴，直接在package.json替换scripts下的serve指令内容：

"serve" : "node --max_old_space_size=10240 node_modules/.bin/vue-cli-service serve --open"

{
  "scripts": {
  "dev": "node --max_old_space_size=5120 ./node_modules/.bin/vuepress dev docs",
    "build": "node --max_old_space_size=5120 ./node_modules/.bin/vuepress build docs",
     "build": "node --max_old_space_size=5120 ./node_modules/.bin/umi build",
  }
}

开发时运行npm run serve或yarn serve即可。

在git action上设置有用；推荐；

优雅的覆盖npx[优先]

和以上的方法唯一的不同，就是不需要编写vue-cli-service包的路径，代码更优雅，也不受包地址的影响。

全局安装npx: npm i -g npx 直接在package.json替换scripts下的serve指令内容：

"serve": "npx --max_old_space_size=5120 vue-cli-service serve"

开发时运行npm run serve或yarn serve即可。

特殊情况

现在线上现场版本，又是通过jks构建的项目；不方便修复老版本的话；

可以用脚本的方式，hack一个新的package.json文件；

解决目前jks构建时，OOM方案

先执行拷贝

sh ./jks-hack-pkg.sh

jks配置调用pkg.json；非特殊情况下，不要使用

cp ../zbak/package.json ./package.json

目前的原理就是替换构建命令脚本

"build": "node --max_old_space_size=5120 ./node_modules/.bin/umi build",

increase-memory-limit

因为V8引擎有对Node进行默认的内存限制大小，那么在Node内存不足的时候，可以放宽内存大小的使用限制，可以在Node启动的时候，传递–max-old-space-size或–max-new-space-size来调整内存大小的使用限制。 但是这种方式需要所有地方都要进行设置，因此需要安装一个插件increase-memory-limit。

在linux上设置没有用；会死循环，本地mac,win可以用；

全局安装方式

$ npm install -g increase-memory-limit
$ cd yourProject
$ increase-memory-limit

项目安装方式

如果脚本中没有暴露node命令; 在package.json里修改

“scripts”: {
  “fixML”: “cross-env LIMIT=5120 increase-memory-limit”，
  "build": "npm run fixML && vuepress build docs",
},
“devDependencies”: {
  "cross-env": "^7.0.3",
   "increase-memory-limit": "^1.0.7",
}

执行一次 npm run fixML