react-staripts build에서 메모리 설정 하는 방법

react-staripts build에서 메모리 설정 하는 방법

npm run build 명령을 날리자 다음과 같은 오류가 발생하였습니다.

오류

[service@ip-10-52-00-00 project]$ npm run build

> project@0.1.0 build /home/service/project
> react-scripts build

Creating an optimized production build...

<--- Last few GCs --->
n [29108:0x45b8410]    54463 ms: Mark-sweep 479.1 (483.6) -> 478.3 (483.3) MB, 402.1 / 0.0 ms  (+ 67.4 ms in 21 steps since start of marking, biggest step 12.2 ms, walltime since start of marking 503 ms) (average mu = 0.133, current mu = 0.067) allocation f[29108:0x45b8410]    54947 ms: Mark-sweep 479.3 (483.3) -> 478.7 (483.8) MB, 435.5 / 0.0 ms  (+ 39.2 ms in 14 steps since start of marking, biggest step 4.6 ms, walltime since start of marking 484 ms) (average mu = 0.078, current mu = 0.019) allocation fa

<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x13cf019]
Security context: 0x1b71cb9008d1 <JSObject>
    1: SourceNode_walk [0x1294ddf74e79] [/home/service/project/node_modules/source-map/lib/source-node.js:~221] [pc=0x3a5fedf8af45](this=0x0243dcd9f6a9 <SourceNode map = 0x3369f2e15c99>,0x17faadf40119 <JSFunction (sfi = 0x333914477ba1)>)
    2: SourceNode_walk [0x1294ddf74e79] [/home/service/project/node_modules/source-map/lib/source-nod...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa093f0 node::Abort() [node]
 2: 0xa097fc node::OnFatalError(char const*, char const*) [node]
 3: 0xb842ae v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb84629 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xd30fe5  [node]
 6: 0xd31676 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
 7: 0xd3def5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xd3eda5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xd4185c v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
10: 0xd0830b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
11: 0x1049f4e v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
12: 0x13cf019  [node]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/service/.npm/_logs/2020-09-02T10_23_38_254Z-debug.log

heap 메모리 부족이라 일반적으로는 다음 명령어로 처리 했습니다.

$> node --max_old_space_size=4096 app.js

하지만 create-react-app 으로 생성한 프로젝트라 build 명령이 다음과 같았습니다.

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

검색을 해보니 react-scripts 가 node_modules/.bin/react-scripts에 있었습니다.

따라서 다음과 같이 메모리 옵션을 주면 됩니다.

$> node --max_old_space_size=4096 node_modules/.bin/react-scripts build

그러면 메모리를 더 할당해서 실행을 하게 됩니다.

라고 했지만 제대로 동작 하지 않았습니다.

추가 처리 내역입니다.

dotenv 모듈이 설치 되어 있어야 합니다.

.env 파일에 아래 내용을 추가해주세요.

NODE_OPTIONS="--max-old-space-size=4096" # 메모리 할당합니다.
GENERATE_SOURCEMAP=false # .map 파일을 생성하지 않는 옵션입니다. build시 메모리 사용을 줄입니다.

참고자료

• Increase JavaScript Heap size in create-react-app project