My Remix app had a really slow HMR, about 4 seconds for each change.
- A quick search lead me to this rebuilding take too long GitHub issue which matches the behavior I’m seeing.
- It is talking about bundle size and mentions Remix Documentation - Performance page.
- There it explains you can analyze a bundle thanks to
./build/metafile*
files generated bynpx remix build
. - Head over to esbuild.github.io/analyze/
- Upload your file. It allows only 1 file!
- Something might be obvious!
Two culprits:
- Sevilla FC emblem weights 2.1 mb.
- We are embedding node
crypto
module inside the browser bundle. We were importing some server side libraries for the action at the top level. Moving these pieces of code inside*.server.ts
file solved it.
We are rebuilding our Remix app 530ms 🎉!
Next is going to be moving the SVG flags and emblems outside of the bundle into a “SVG sprites”.