如何解决AWS Pipeline构建React.js应用时的'heap out of memory'错误

问题背景 #

此前通过将AWS Pipeline计算配置升级为8GB 4 vCPUs，React.js应用构建流程正常运行约4个月，但近期再次出现JavaScript堆内存不足错误。

错误日志尾部 #

<--- Last few GCs ---&gt;

[194:0x602a710]   157171 ms: Scavenge 2012.6 (2071.4) -&gt; 2012.2 (2081.9) MB, 4.6 / 0.0 ms  (average mu = 0.520, current mu = 0.203) allocation failure 
[194:0x602a710]   157184 ms: Scavenge 2020.1 (2082.4) -&gt; 2019.8 (2083.4) MB, 4.5 / 0.0 ms  (average mu = 0.520, current mu = 0.203) allocation failure 
[194:0x602a710]   157767 ms: Scavenge 2021.0 (2083.4) -&gt; 2020.2 (2105.4) MB, 582.3 / 0.0 ms  (average mu = 0.520, current mu = 0.203) allocation failure 


<--- JS stacktrace ---&gt;

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb09c10 node::Abort() [/usr/local/bin/node]
 2: 0xa1c193 node::FatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0xcf8dde v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0xcf9157 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0xeb09f5  [/usr/local/bin/node]
 6: 0xec06bd v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 7: 0xec33be v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
 8: 0xe848fa v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
 9: 0x11fd646 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
10: 0x15f20b9  [/usr/local/bin/node]

[Container] 2023/01/19 04:07:01 Command did not exit successfully npm run build exit status 1
[Container] 2023/01/19 04:07:01 Phase complete: BUILD State: FAILED
[Container] 2023/01/19 04:07:01 Phase context status code: COMMAND_EXECUTION_ERROR Message: Error while executing command: npm run build. Reason: exit status 1
[Container] 2023/01/19 04:07:01 Entering phase POST_BUILD
[Container] 2023/01/19 04:07:01 Phase complete: POST_BUILD State: SUCCEEDED
[Container] 2023/01/19 04:07:01 Phase context status code:  Message: 
[Container] 2023/01/19 04:07:02 exiting execCommands
[Container] 2023/01/19 04:07:02 Expanding base directory path: build
[Container] 2023/01/19 04:07:02 Assembling file list
[Container] 2023/01/19 04:07:02 Expanding build
[Container] 2023/01/19 04:07:02 Expanding file paths for base directory build
[Container] 2023/01/19 04:07:02 Assembling file list
[Container] 2023/01/19 04:07:02 Expanding **/*
[Container] 2023/01/19 04:07:02 Found 7 file(s)
[Container] 2023/01/19 04:07:02 Phase complete: UPLOAD_ARTIFACTS State: SUCCEEDED
[Container] 2023/01/19 04:07:02 Phase context status code:  Message: 

BuildSpec配置 #

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 16
   
    commands:
        # install npm
        - npm install --force
       
  build:
    commands:
        # run build script
        - npm run build
     
artifacts:
    files:
        - '**/*'
    base-directory: build

当前计算配置 #

• 内存：8GB
• vCPUs：4

解决方案 #

1. 调整Node.js堆内存上限 #

在BuildSpec的build阶段，修改构建命令，显式指定Node.js堆内存大小（建议分配实例总内存的70%-80%，避免占满系统内存）：

build:
  commands:
      - NODE_OPTIONS="--max-old-space-size=6144" npm run build

2. 排查项目变化 #

• 检查近4个月新增的依赖包，用npm list梳理依赖树，移除未使用的冗余依赖。
• 确认代码改动是否引入了大量静态资源、复杂打包逻辑或激进优化选项，这些都可能导致内存占用激增。

3. 优化构建配置 #

• 若使用Create React App，禁用source map生成可大幅降低内存消耗：

  build:
    commands:
        - GENERATE_SOURCEMAP=false npm run build
  

• 自定义Webpack配置时，开启缓存复用构建结果，或拆分代码块减少单bundle体积。

4. 升级Node.js版本 #

Node.js后续版本在内存管理上有优化，可尝试升级到Node.js 18（需确认项目兼容性）：

runtime-versions:
  nodejs: 18

5. 升级实例规格 #

若以上优化无效，可考虑升级到16GB内存的实例，但这是最后手段，优先通过配置优化解决问题。

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