집 > 기사 > 웹 프론트엔드 > Angle4에서 JS 메모리 오버플로 문제를 해결하는 방법

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

php中世界最好的语言원래의: 2018-04-11 17:07:522047검색

이번에는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 중국어 웹사이트의 다른 관련 기사에 주목하세요!