create-react-app执行react-scripts build因内存不足崩溃求助

1. 调整WSL内存分配（优先排查） #

WSL默认会限制可用内存（通常为主机RAM的50%或8GB，取较小值），即便主机有16GB内存，也可能未给足构建所需的资源。

• 关闭所有WSL实例，在Windows用户目录下创建/编辑.wslconfig文件（无则新建）：

  [wsl2]
  memory=10GB
  swap=4GB
  

  保存后执行wsl --shutdown重启WSL，再重新尝试构建。

2. 优化应用体积与构建流程 #

针对应用体积过大的问题，从代码层面拆分优化：

• 路由级代码拆分：用React.lazy和Suspense拆分路由组件，避免一次性打包所有代码：

  import { lazy, Suspense } from 'react';
  import { Routes, Route } from 'react-router-dom';
  
  const Home = lazy(() => import('./pages/Home'));
  const About = lazy(() => import('./pages/About'));
  
  function App() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    );
  }
  

• 分析依赖体积：用source-map-explorer定位冗余依赖：
  1. 安装依赖：npm install source-map-explorer --save-dev
  2. 构建并分析：npm run build && npx source-map-explorer 'build/static/js/*.js'
  3. 根据结果替换大体积依赖，比如用lodash-es替代完整lodash，按需引入。
• 禁用生产环境Source Map：减少构建时的内存占用，修改package.json：

  {
    "scripts": {
      "build": "GENERATE_SOURCEMAP=false react-scripts build"
    }
  }
  

3. 修复react-scripts潜在内存问题 #

即便未更新Node/npm，旧版react-scripts可能存在内存泄漏，尝试升级到同大版本的最新补丁：

• 查看当前版本：npm list react-scripts
• 升级对应大版本，比如3.x系列：npm install react-scripts@3.x --save

4. 清理构建缓存 #

• 清理create-react-app缓存：npx clear-npx-cache
• 清理npm缓存并重装依赖：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

5. 正确配置Node.js内存参数 #

确保max-old-space-size参数生效，修改package.json：

{
  "scripts": {
    "build": "NODE_OPTIONS=\"--max-old-space-size=8192\" react-scripts build"
  }
}

设置的内存值需与WSL分配的内存匹配，不要超出WSL可用上限。

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