집 > 기사 > 웹 프론트엔드 > Angle4를 사용할 때 JavaScript 메모리 오버플로 문제가 발생합니다(자세한 튜토리얼).

Angle4를 사용할 때 JavaScript 메모리 오버플로 문제가 발생합니다(자세한 튜토리얼).

亚连원래의: 2018-06-01 09:47:381434검색

이 글은 주로Angular4 JavaScript의 메모리 오버플로 문제를 소개하고 있습니다.

최근에Angular4를 기반으로 프로젝트를 작성할 때 --prod를 빌드할 때 갑자기 오류가 발생했습니다. 오류는 대략 다음과 같습니다.

70% building modules 1345/1345 modules 0 active
<--- Last few GCs --->
ms: Mark-sweep 703.9 (837.9) -> 701.4 (811.9) MB, 331.3 / 0 ms [allocation failure] [GC in old space requested].
ms: Mark-sweep 701.4 (811.9) -> 701.4 (790.9) MB, 350.5 / 0 ms [allocation failure] [GC in old space requested].
ms: Mark-sweep 701.4 (790.9) -> 698.0 (760.9) MB, 433.7 / 0 ms [last resort gc].
ms: Mark-sweep 698.0 (760.9) -> 692.7 (751.9) MB, 328.7 / 0 ms [last resort gc].


<--- JS stacktrace --->

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

Security context: 00000298510373A9 <JS Object>
  1: /* anonymous */(aka /* anonymous */) [D:\dev\cobalt_wp\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:77] [pc=0000026F721B51D6] (this=0000029851004131 <undefined>,dep=00000150FC6162C9 <a NormalModule with map 0000025741730C01>)
  2: arguments adaptor frame: 3->1
  3: InnerArrayForEach(aka InnerArrayForEach) [native array.js:~924] [pc=0000026F71EE3DCD] (this=000002985100413...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

참고: 여기 코드는 제 실제 코드가 아닙니다. 하나. 오류 코드, 컴파일 시간이 너무 길어서 가로채는 것을 잊어버렸습니다. 일반적인 오류는 기본적으로 동일합니다. 동일한 문제가 발생하면 축하합니다. 아래를 읽으면 답을 찾을 수 있습니다. 그 당시에는 컴파일이 꽤 괜찮았는데 왜 갑자기 오버플로가 되었나요?

가능한 이유는 다음과 같습니다.

1.angular4에는 컴파일 중에 많은 양의 CPU와 메모리가 필요합니다. 파일이 많으면 메모리가 부족할 수 있습니다.(가능);

2. 코드에 대용량 루프 또는 무한 루프가 있는 경우(서버 단계에서 오버플로가 없으면 이 확률은 낮아야 합니다)

3.AngOnDestroy 단계에서 구독한 데이터가 파괴되지 않아 메모리를 많이 차지하게 됩니다(아마도)

아직까지 구체적인 원인은 발견되지 않았습니다. 알려주셔서 감사합니다!

이 문제를 해결하는 과정은 매우 우여곡절이 많으므로 여기서는 다루지 않겠습니다. 따라서 아래에서 해결 방법에 대해 이야기해 보겠습니다. 핵심 아이디어는 v8 엔진의 이전 속성인 --max_old_space_size를 사용하여 온라인으로 메모리를 수정하는 것입니다. 이 속성을 설정할 위치는 성가신 작은 고블린입니다.

디렉토리 수정: my-project/node_modules/. bin ng.cmd 찾기:

@IF EXIST "%~dp0\node.exe" (
 "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\._@angular_cli@1.0.0@@angular\cli\bin\ng" %*
) ELSE (
 @SETLOCAL
 @SET PATHEXT=%PATHEXT:;.JS;=;%
 node --max_old_space_size=8192 "%~dp0\..\._@angular_cli@1.0.0@@angular\cli\bin\ng" %*
)

디렉토리 수정: my-project/node_modules/.bin ngc.cmd 찾기:

@IF EXIST "%~dp0\node.exe" (
 "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*
) ELSE (
 @SETLOCAL
 @SET PATHEXT=%PATHEXT:;.JS;=;%
 node --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*
)

내부 보기 --max_old_space_size가 얼마나 설정되었나요? 숫자를 설정하는 건 본인이 알아서 하시면 됩니다. 제 프로젝트는 상대적으로 크기 때문에 사고 방지를 위해 더 큰 값을 설정했어요 ㅎㅎ

그럼 ng build --prod를 실행해 보세요. 이 정도면 충분하다고 생각하시나요?

제가 직접 테스트해본 결과, 위 설정으로 다시 컴파일을 해도 여전히 메모리 오버플로가 발생하는 것으로 보입니다. 현재 디렉터리를 my-project/node_modules/로 전환해 보세요. .bin 그런 다음 ng build --prod를 실행하면 세상이 갑자기 평화로워질 것입니다! 제가 직접 테스트해 보았는데 작동하니 꼭 보관해 두세요.

위 내용은 모두에게 도움이 되기를 바랍니다. 미래에.

Angle4를 사용할 때 JavaScript 메모리 오버플로 문제가 발생합니다(자세한 튜토리얼).

관련 기사