Angular AOT / Webpack memory trick

If you're dealing with a growing javascript app, you might reach that point where your build scripts will run out of memory. Wait what? I have 16 GB on my machine, how can this happen?

The problem

Let say for instance that you are using Rollup with a set of very common plugins such as:

  • rollup-plugin-node-builtins
  • rollup-plugin-node-globals
  • rollup-plugin-node-resolve
  • rollup-plugin-commonjs
  • rollup-plugin-uglify

You now write a lot of code and add a bunch of 3rd party libs. You're happy everything works fine. Proud and ready to commit you try to bundle and uglify the thing using your home made shiny npm run build:prod or whatever script you use to do that. And Boom!

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory  

What happens? Well I think it starts with that:

OK ok, but javascript world is what it is and for the sake of getting things done, what can you do?

Solution

The core problem is that node comes with a default memory restriction to 1.76 GB. If you need more you need to set the option --max_old_space_size={desiredSize} when you start a node process.

Wait! What? I'm running an npm command how do I pass an option to node? Well you don't!

Since npm does not provide the ability to set this option, we have to do something else. If you are using bash or a similar you can use aliases. If you are running on windows, you're life is gonna be harder.

Well, maybe not, there is one guy who wrote a simple npm utility: Increase Memory Limit.

How do you use it?

Just install it globally

npm install -g increase-memory-limit  

Then in your project folder run

increase-memory-limit  

What does it do ? It actually patches the files in node_module/.bin directory adding the --max-old-space-size=4096 option.

Now you are all set! What's good about it? It's easy to use and Xplat. It's also very easy to integrate in your CI/CD pipeline.