How to solve the JS memory overflow problem in angular4

This time I will bring you how to solve the JS memory overflow problem of angular4, how to solve the JS memory overflow problem of angular4What are the precautions, the following is a practical case, let's take a look.

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

70% building modules 1345/1345 modules 0 active

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 stack trace =========================================
Security context: 00000298510373A9 <js>
  1: /* anonymous */(aka /* anonymous */) [D:\dev\cobalt_wp\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:77] [pc=0000026F721B51D6] (this=0000029851004131 <undefined>,dep=00000150FC6162C9 <a>)
  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</a></undefined></js>

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. You can find the answer by reading below!

I was confused at that time. The compilation was always going well. Why did it suddenly overflow?

Possible reasons are as follows:

1. When angular4 is compiled, the demand for CPU and memory is relatively large. When there are a large number of files, there may be insufficient memory (possibly);

2. When the code has a loop or infinite loop with a large amount of big data (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, causing a large amount of data to occupy memory (possible)

At present, we have not found out the specific cause. Does anyone know about it? Please feel free to enlighten us. Thank you!

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

The core idea is to use the old attributes 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" %*
)

Did you see the --max_old_space_size setting in it? As for how much the number should be set, you can decide it yourself. My project is relatively large, so I 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 personally tested it and found that after setting up as above, a memory overflow will still be reported when compiling again, which seems to be of no use! Switch the current directory to my-project/node_modules/.bin and then execute ng build --prod, and the world will suddenly be at peace. ! I personally tested it and it works, so please keep it!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps for vue to use the xe-utils function library

Vue refreshes after packaging the project How to deal with 404 display

The above is the detailed content of How to solve the JS memory overflow problem in angular4. For more information, please follow other related articles on the PHP Chinese website!