Angle4에서 JS 메모리 오버플로 문제를 해결하는 방법

이번에는Angular4에서 JS 메모리 오버플로 문제를 해결하는 방법을 보여 드리겠습니다.Angular4에서 JS 메모리 오버플로 문제를 해결하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 최근에 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. Angle이 구독한 데이터는 ngOnDestroy 단계에서 소멸되지 않아 많은 양의 데이터가 메모리를 차지하게 됩니다(가능)

아직까지 구체적인 원인은 발견되지 않았습니다. 혹시 아시는 분 계시나요? 알려주세요.

이 문제를 해결하는 과정은 매우 복잡하므로 여기서는 다루지 않겠습니다. 아래에서 해결 방법에 대해 이야기해 보겠습니다. 핵심 아이디어는 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, 그러면 세상이 갑자기 평화로워질 것입니다. 제가 직접 테스트해 본 결과 작동합니다.

이 기사의 사례를 읽으신 후 이 방법을 익히셨을 것으로 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

vue가 xe-utils 함수 라이브러리를 사용하는 단계에 대한 자세한 설명

Vue가 프로젝트 패키징 후 디스플레이를 새로 고칠 때 404를 처리하는 방법

위 내용은 Angle4에서 JS 메모리 오버플로 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!