search

pmmmwh / react-refresh-webpack-plugin

A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
MIT License
3.13k stars 192 forks source link

Memory cleanup doesn't happen on incremental compiles #832

Open gaganpreet-toddle opened 5 months ago

gaganpreet-toddle commented 5 months ago

When using react-refresh-webpack-plugin,

On incremental compiles (making changes in codebase and then saving, triggering a recompile), we observed that the memory increases a lot while the recompile is taking place and once it is done and the changes are reflected on the browser, the memory doesn't go down to anywhere around it was before (garbage collection). Due to this, each incremental compile adds on around 400-500MB which leaves around 300-400MB unretrieved, resulting in high memory consumption after a few recompiles and working on an 8GB mac becomes very difficult where webpack started with consuming 5GB in the beginning and after a few incremental compiles, it reaches to 6.5GB.


On the other hand, when we use react-hot-loader, the garbage collection is very ideal. During incremental compile, it consumes additional 300-400MB, which it leaves almost fully within 5-10secs after the compile is done. Memory doesn't pile up at all.


Would be great if you could take a look. Thanks!

pmmmwh commented 4 months ago

Do you have a sample repo that we can look into?

gaganpreet-toddle commented 4 months ago

Hey, no sample repo as of now. We were using it in our company repo which is very large, something around 25k modules. Building a sample this large is tough and I guess this kind of replication is only possible when your app is testing limits of our machine. Also currently I am very hard pressed on time. It would be great if you could try to take a look. I'll try to build a sample reproduction in a few days when I get time.

pmmmwh commented 4 months ago

In v0.5.13 there's a change that may or may not help with the memory pressure problem - I suspect the issue here is either related to Webpack's in-memory file system, or how we cache "module type" (CJS vs ESM) for paths. I'll try to make some time next week to see if I can create a repo big enough to see this hike + do some memory profiling.