JavaScript memory overflow problem occurs when using angular4 (detailed tutorial)

This article mainly introduces the memory overflow problem of angular4 JavaScript. Now I share it with you and give you a reference.

When I was writing a project based on angular4 recently, when building --prod, an error suddenly popped up unexpectedly. The error is roughly as follows:

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

Note: The code here is not my actual error code. The compilation time was too long and I forgot to intercept it. The general error is basically the same. If you encounter the same problem, congratulations, read on. I can find the answer!

I was confused at the time, the compilation was always going well, why did it suddenly overflow?

The possible reasons are as follows:

1 .angular4 has relatively large demands on CPU and memory during compilation. When there are a large number of files, there may be insufficient memory (possibly);

2. When the code contains a large amount of big data Loop or infinite loop (there is no overflow in the sever stage, this probability should be low);

3. The data subscribed by angular is not destroyed in the ngOnDestroy stage, resulting in a large amount of data occupying memory (possible)

The specific cause has not been found so far. Does anyone know about it? Please feel free to enlighten me. Thank you!

The process of solving this problem is very twists and turns, so I won’t go into it here. You probably don’t want to I know, let’s talk about the solution below:

The core idea is to use the old attribute of the v8 engine: --max_old_space_size to modify the memory online. As for where to set this attribute, it is a annoying little goblin!

Modify directory: my-project/node_modules/.bin Find 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" %*
)

Modify directory: my-project/node_modules/. bin Find 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" %*
)

Have you seen the --max_old_space_size setting in it? As for the number, you can decide for yourself, mine The project is relatively large, so set a larger value to prevent accidents, haha!

Then execute ng build --prod, do you think this is enough? This is the key point!

I have personally tested it. If you set up the above settings and then compile again, a memory overflow will still be reported. It seems to be of no use! Switch the current directory to my-project/node_modules/.bin and then execute ng build --prod. The world will suddenly be peaceful. Got it! I personally tested it and it works, so please keep it!

I compiled the above for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to change a certain value in the data requested by vue

Detailed explanation of using vue -cli scaffolding initializes the project structure under the Vue project

vue and vue-i18n are combined to implement multi-language switching method of background data

The above is the detailed content of JavaScript memory overflow problem occurs when using angular4 (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!