部署在Heroku的React应用出现503错误，求助排查内存问题

核心原因 #

从日志里的FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory可以明确，这是内存不足导致的进程崩溃，进而引发Heroku的503错误。但不是你的应用体积过大，而是你在Heroku上运行了React的开发模式——react-scripts start启动的是webpack-dev-server，开发模式下会保留大量调试代码、热重载机制，内存占用远高于生产模式，超出了Heroku免费dyno的内存限制。

解决步骤 #

1. 切换到生产模式部署（推荐）

Heroku上部署React应用必须用生产模式，步骤如下：

• 修改package.json中的scripts：

  "scripts": {
    "start": "serve -s build",
    "build": "react-scripts build",
    "dev": "react-scripts start"
  }
  

• 安装静态文件服务器依赖：

  npm install --save serve
  

• 提交修改后的package.json和锁文件到Git，重新推送部署到Heroku。Heroku会自动执行npm run build生成生产构建包，再通过serve启动服务。

2. 临时调整内存限制（仅用于测试开发模式）

如果确实需要在Heroku运行开发模式，可以通过Node参数提升内存上限：
修改package.json的start命令：

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

但免费dyno的内存配额有限，这种方法只是临时缓解，不适合长期使用。

3. 排查应用内存泄漏（若生产模式仍出问题）

如果切换到生产模式后还是出现内存问题，可能是应用本身存在内存泄漏，比如：

• 未清理的定时器或Interval
• 未取消的事件监听、订阅（如Redux订阅、WebSocket连接）
• 全局变量累积大量数据
• 组件卸载后仍保留的引用

可以用Chrome DevTools的Memory面板分析内存使用情况，定位泄漏点。

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