运行React应用报JavaScript heap out of memory 降级Node仍未解决

该报错是Node.js运行时堆内存不足导致的，本质是React项目构建过程中（比如webpack打包、babel转译、sourceMap生成等操作）占用的内存超过了Node.js默认分配的堆内存上限。你降级Node.js和npm版本没有效果，是因为不同版本Node.js的默认堆内存上限差异很小，部分新版本默认上限反而更高，降级操作不对症。

• 临时调高Node.js堆内存上限
  直接修改项目package.json中的启动/构建命令即可，以create-react-app创建的项目为例：
  原来的scripts配置：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
  

  修改为：

  "scripts": {
    "start": "node --max-old-space-size=4096 node_modules/react-scripts/scripts/start.js",
    "build": "node --max-old-space-size=4096 node_modules/react-scripts/scripts/build.js"
  }
  

  其中4096代表给Node.js分配4GB堆内存，你可以根据自己设备的配置调整为6144（6GB）、8192（8GB）等数值。
  也可以通过设置环境变量的方式配置：

  • Windows cmd 环境：执行set NODE_OPTIONS=--max-old-space-size=4096
  • Windows PowerShell 环境：执行$env:NODE_OPTIONS="--max-old-space-size=4096"
  • Mac/Linux 终端环境：执行export NODE_OPTIONS=--max-old-space-size=4096
    配置完成后再正常执行npm run start或npm run build即可。

• 优化项目构建配置降低内存占用
  先删除本地的node_modules文件夹和package-lock.json/yarn.lock依赖锁文件，重新执行npm install安装依赖，部分情况下依赖版本冲突、嵌套层级过深会导致构建内存异常升高。
  开发环境下可以关闭不必要的全量ESLint检查、sourceMap生成功能，生产构建时关闭多余的代码分析、冗余压缩插件，也能显著降低构建过程的内存消耗。
  如果需要跨系统兼容配置，可以安装cross-env包统一处理环境变量，修改scripts为：

  "start": "cross-env NODE_OPTIONS=--max-old-space-size=4096 react-scripts start"
  

• 内存泄漏排查
  如果调高内存上限后仍然报错，需要检查项目代码中是否存在死循环、未释放的全局大对象，或者引入的第三方依赖存在内存泄漏问题，可以使用Chrome DevTools的Node.js内存分析工具定位具体泄漏点修复。

内容的提问来源于stack exchange，提问作者kibuikaCodes