29

I have a relatively simple React 15 website. It only has a few distinct pages, and it's mainly just text and some pictures. However, when I use react-scripts build to build the project for production deployment, I'm finding that the node process tops out at around 1.25 GB of RAM used. This hasn't been an issue when building on my workstation, but it's a problem on my production server, where I currently only have 1 GB of RAM available. Most of the time, the server kills my build due to running out of memory.

So it seems my options are to spend more money to upgrade to 2GB of RAM on the server, or find some way to reduce the memory usage. I'd like to avoid paying more, because normally I don't use more than 200 MB of RAM to run my application, and it's just building it that uses a lot of RAM.

I've seems some people recommend adding a --max-old-space-size= flag to the build, but that doesn't seem to do anything. That is, I've tried this in my package.json:

"build": "react-scripts --max-old-space-size=512 build"

But it still uses up 1+ GB of RAM. I kick off the build via npm run build, and adding the --max-old-space-size flag to that npm command doesn't seem to do anything.

Is there anything I can do to prevent the react-scripts build process from using so much memory?

Eduardo Cuomo
  • 17,828
  • 6
  • 117
  • 94
Dan
  • 1,125
  • 1
  • 13
  • 22
  • Have you found a solution to this problem yet? – Brecht Valcke Mar 07 '20 at 11:48
  • 3
    No, I couldn't find a solution to this. I just ended up increasing the RAM on my VM, and moved on with things. – Dan Mar 08 '20 at 14:56
  • I also assumed using `--max-old-space-size` would fix it but it doesn't. The only option I see is to go the usual CI route and build it on a separate machine and push the built files to the instance – apnerve Jun 10 '20 at 06:32
  • is it possible that you are generating source maps when building a production build? I had this situation (it needed around 1.4GB) when accidentally i enabled source maps generation – Mike Rodov Jun 22 '20 at 20:11
  • Perhaps related https://github.com/facebook/create-react-app/issues/8096 – leonbloy Aug 25 '20 at 14:08
  • 1
    Try to use Webpack bundle analyzer to check your npm packages maybe you have installed too many and too heavy – Dmitriy Sakhno Nov 21 '20 at 10:16
  • Does this help you: https://reactjs.org/docs/optimizing-performance.html – Sinan Yaman Dec 22 '20 at 08:02

4 Answers4

6

The answer from similar question:

You can just put --max_old_space_size for node process instead of react-script.

e.g. node --max_old_space_size=512 node_modules/.bin/react-scripts build

Dolf Barr
  • 509
  • 4
  • 13
2
  1. You could add swap space on your production server. Please refer to this
  2. What node version are you using on the production server? Try to upgrade your node version using nvm or other ways. I think it is a problem for you.
hotcakedev
  • 2,194
  • 1
  • 25
  • 47
  • This doesn't work. I added swap space (3GiB) over 1 GiB of RAM. It still runs out of memory. My node version is v16.15.1, and that doesn't help either. – Deekshant Joshi Jun 30 '22 at 07:39
2

In Package.json file modify the build script as below.

"build": "react-scripts --max_old_space_size=4096 build"

This should work!

Additionally in .env file you can specify not to generate source map for your project it will help your App to load faster!

GENERATE_SOURCEMAP=false
Pankaj Negi
  • 69
  • 5
0

I had faced a similar issue, but in my case, it helped me when I updated the react-scripts package that comes with CRA (create-react-app).

If your current version is 3.x.x upgrade it to the latest version of 3, you can find all the available version from here.

v3.x.x - https://github.com/facebook/create-react-app/blob/master/CHANGELOG-3.x.md

v2.x.x - https://github.com/facebook/create-react-app/blob/master/CHANGELOG-2.x.md

Harishm72
  • 11
  • 1
  • 2