如何减小CRA创建的React应用体积，解决Heroku内存超限问题？

核心问题分析 #

Heroku基础/免费层内存配额为512MB，你的应用进程占用772MB（超出150%）触发了R14错误，导致无法正常启动。修改生产环境的Source Map类型可降低构建产物的内存占用，配合其他优化手段能进一步压缩运行时内存。

方法一：无需Eject，通过Craco修改Webpack配置 #

Create React App默认不允许直接修改Webpack配置，推荐用@craco/craco覆盖配置，无需执行eject：

1. 安装Craco依赖

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js，配置生产环境Source Map

module.exports = {
  webpack: {
    configure: (webpackConfig, { env }) => {
      if (env === 'production') {
        // 将生产环境Source Map改为inline-cheap-module-source-map
        webpackConfig.devtool = 'inline-cheap-module-source-map';
      }
      return webpackConfig;
    },
  },
};

3. 修改package.json中的脚本命令，替换为Craco

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

方法二：额外优化降低运行时内存占用 #

仅修改Source Map可能不足以解决问题，配合以下优化进一步压缩内存：

1. 使用轻量静态文件服务器
   默认React启动脚本适合开发环境，生产环境改用serve托管静态文件，内存占用更低：

npm install serve --save

修改package.json的启动命令：

"scripts": {
  "start": "serve -s build",
  "build": "craco build",
  // ...其他脚本
}

2. 启用Gzip压缩
   通过Webpack插件压缩静态资源，减少传输体积和内存占用：

npm install compression-webpack-plugin --save-dev

更新craco.config.js添加压缩插件：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  webpack: {
    configure: (webpackConfig, { env }) => {
      if (env === 'production') {
        webpackConfig.devtool = 'inline-cheap-module-source-map';
        // 添加Gzip压缩
        webpackConfig.plugins.push(new CompressionPlugin());
      }
      return webpackConfig;
    },
  },
};

3. 代码层面排查内存泄漏
   检查组件中是否存在未清理的定时器、事件监听器、全局缓存等，这些会持续占用内存。比如在组件卸载时清理定时器：

useEffect(() => {
  const timer = setInterval(() => { /* ... */ }, 1000);
  return () => clearInterval(timer); // 组件卸载时清理
}, []);

验证部署 #

完成配置后，重新构建并推送到Heroku：

git add .
git commit -m "优化内存占用及Source Map配置"
git push heroku main

查看Heroku日志确认内存占用是否降至配额内：

heroku logs --tail

内容的提问来源于stack exchange，提问作者Máté Fellner