webpackで「JavaScript heap out of memory」エラー

はじめに
環境
発生したエラー
対処法
参考サイト

はじめに

npm scriptsを使ってIonic(Angular/TypeScript)のAndroidビルドをしている時にFATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memoryエラーが発生して処理が落ちてしまった。

環境

Windows 10
Angular@5.0.1
ionic@3.9.5
webpack@3.8.1
node v8.11.3
npm@6.1.0

発生したエラー

発生しているエラーはヒープサイズ不足によるエラーとなるFATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

詳細なエラーメッセージは下記となる（省略部分あり）。

$ npm run build:android --env=dev4 --releasetype=android

<中略>

> webpack --progress --config ./config/webpack.config.js --hide-modules

69% building modules 1427/1437 modules 10 active ...odules\core-js\modules\_math-log1p 
69% building modules 1428/1437 modules 9 active ...odules\core-js\modules\_math-log1p. 
69% building modules 1429/1437 modules 8 active ...odules\core-js\modules\_math-log1p. 
69% building modules 1430/1437 modules 7 active ...odules\core-js\modules\_math-log1p. 

<中略>

91% additional asset processing       
<--- Last few GCs --->

[23324:000001DB86E99F80]  1136311 ms: Mark-sweep 1345.4 (1446.3) -> 1345.4 (1446.3) MB, 1025.9 / 0.0 ms  allocation failure GC in old space requested
[23324:000001DB86E99F80]  1137592 ms: Mark-sweep 1345.4 (1446.3) -> 1345.4 (1435.8) MB, 1154.1 / 0.0 ms  last resort GC in old space requested
[23324:000001DB86E99F80]  1138612 ms: Mark-sweep 1345.4 (1435.8) -> 1345.4 (1435.8) MB, 1019.8 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

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

Security context: 000003CA08025879 <JSObject>
    1: /* anonymous */(aka /* anonymous */) [000002FAFA6022D1 <undefined>:~3227] [pc=000001AC8582FFF7](this=000002FAFA6022D1 <undefined>,self=0000035515E06269 <AST_Array map 
= 000000C2D106EC59>,tw=00000317A7E51B79 <Compressor map = 000000C2D10709E9>)
    2: before [000002FAFA6022D1 <undefined>:~5479] [pc=000001AC8559B096](this=00000317A7E51B79 <Compressor map = 000000C2D10709E9>,node=000003551...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node_module_register
 2: v8::internal::FatalProcessOutOfMemory
 3: v8::internal::FatalProcessOutOfMemory
 4: v8::internal::Factory::NewCodeRaw
 5: v8::internal::Factory::NewCode
 6: v8::internal::modulo
 7: v8::internal::compiler::ControlFlowOptimizer::TryBuildSwitch
 8: v8::internal::interpreter::HandlerTableBuilder::HandlerTableBuilder
 9: v8::internal::compiler::Pipeline::AllocateRegistersForTesting
10: v8::internal::compiler::ValueNumberingReducer::operator=
11: v8::internal::CompilationJob::FinalizeJob
12: v8::internal::CompilationJob::isolate
13: v8::internal::Compiler::FinalizeCompilationJob
14: v8::internal::OptimizingCompileDispatcher::InstallOptimizedFunctions
15: v8::internal::StackGuard::HandleInterrupts
16: v8::internal::wasm::WasmOpcodes::TrapReasonMessage
17: 000001AC847043C1
npm ERR! code ELIFECYCLE
npm ERR! errno 3

<省略>

上記のエラーメッセージを見ていくとwebpackのコマンド(webpack --progress --config ./config/webpack.config.js --hide-modules)を実行しているタイミングでヒープサイズ不足のエラーが発生していることがわかる。

対処法

エラーが発生しているnpm scriptsのコマンド(build:ts)にオプションを追加して、--max_old_space_sizeのサイズを大きくしてから再実行すると直った。

package.json

// 修正前
"build:ts": "webpack --progress --config ./config/webpack.config.js --hide-modules"

// 修正後
"build:ts": "cross-env NODE_OPTIONS=--max_old_space_size=2048 webpack --progress --config ./config/webpack.config.js --hide-modules"

上記の通り、npm scriptsのwebpackのコマンドにcross-env NODE_OPTIONS=--max_old_space_size=2048を追記して、--max_old_space_sizeのサイズを拡大している。

なお、cross-envがインストールされていなくてエラーが発生する場合は、下記の通りcross-envをインストールする必要がある。