Home

오늘의 기억

[Node] Webpack 메모리 설정


Webpack 실행 시 메모리 설정

webpack 으로 번들링을 하다보면 dependency 가 높은 모듈을 편집할때 다음과 같은 에러를 맞이할 수 있다.

<--- Last few GCs --->

[19528:000001BFB6C4C1A0]    86458 ms: Scavenge 1376.1 (1422.6) -> 1375.6 (1423.1) MB, 4.7 / 0.0 ms  (average mu = 0.324, current mu = 0.348) allocation failure
[19528:000001BFB6C4C1A0]    86465 ms: Scavenge 1376.3 (1423.1) -> 1375.9 (1424.1) MB, 4.9 / 0.0 ms  (average mu = 0.324, current mu = 0.348) allocation failure
[19528:000001BFB6C4C1A0]    86471 ms: Scavenge 1376.6 (1424.1) -> 1376.0 (1424.6) MB, 4.5 / 0.0 ms  (average mu = 0.324, current mu = 0.348) allocation failure

<--- JS stacktrace --->

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

    0: ExitFrame [pc: 000003E1493DC5C1]
Security context: 0x03e51759e6e1 <JSObject>
    1: keys [000003E517585199](this=0x03e517584631 <JSFunction Object (sfi = 000000FEA4E0E331)>,0x0335f8cba0d9 <Object map = 000002D0F6D02571>)
    2: SourceNode_walkSourceContents [0000014D145ABF61] [C:\project\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:~301] [pc=000003E14A1C208B](this=0x03...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6B83F121A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4810
 2: 00007FF6B83CA5B6 node::MakeCallback+4518
 3: 00007FF6B83CAFA0 node_module_register+2160
 4: 00007FF6B865B3EE v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF6B865B31F v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF6B8B99304 v8::internal::Heap::MaxHeapGrowingFactor+11476
 7: 00007FF6B8B8FA67 v8::internal::ScavengeJob::operator=+25543
 8: 00007FF6B8B8DFDC v8::internal::ScavengeJob::operator=+18748
 9: 00007FF6B8B96F57 v8::internal::Heap::MaxHeapGrowingFactor+2343
10: 00007FF6B8B96FD6 v8::internal::Heap::MaxHeapGrowingFactor+2470
11: 00007FF6B8739DD7 v8::internal::Factory::NewFillerObject+55
12: 00007FF6B87D1ABA v8::internal::WasmJs::Install+29530
13: 000003E1493DC5C1

npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! project@1.0.0 develop: `webpack -w --config webpack.develop.config.js`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the project@1.0.0 develop 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!     C:\Users\crpark\AppData\Roaming\npm-cache\_logs\2019-06-03T08_47_19_735Z-debug.log

특히 dependency 가 높을 수록 해당 에러가 자주 난다.
에러 메세지를 살펴보면 가장 중요한 메세지가 보인다.

JavaScript heap out of memory

바로 JavaScript 힙 메모리가 부족해서 발생하는 에러이다.
물론 논리적으로 메모리 관리를 잘 해서 해당 에러가 안나게 하는게 제일 좋은 방법이지만, 별 다른 문제가 없는데 이러한 에러가 나는 경우도 존재한다.

그럴 때는 메모리 설정을 편집해주면 된다.

webpack 의 번들링은 기본적으로 node.js 로 실행된다. 따라서 node.js 의 메모리를 변경하면 되는데 이 node.js 의 기본 메모리는 512MB 이다.

높다고 생각하면 높은 메모리이지만, 부족하다고 생각하면 한 없이 부족한게 메모리이다.
(개인적으로 최소한 2GB 는 되야하지 않나 싶다..)

메모리 설정을 편집하는 방법은 webpack 의 실행 커맨드에 옵션을 주면 된다.

webpack --config webpack.build.config.js --max_old_space_size=4096

webpack 이후 본인의 설정 옵션은 유지하고, 맨 뒤에 --max_old_space_size 항목을 추가하는 것이다.
해당 키의 값으로는 설정 할 메모리를 입력한다. 단위는 MB이다.

위 예제는 4GB 로 메모리를 설정한 것이다.

이후 webpack 번들링을 하면 이전보다 좀 더 원활히 수행되는 것을 볼 수 있을 것이다.

20190603 Charyum.Park