Remix HMR was slow

05 September 2023

My Remix app had a really slow HMR, about 4 seconds for each change.

  1. A quick search lead me to this rebuilding take too long GitHub issue which matches the behavior I’m seeing.
  2. It is talking about bundle size and mentions Remix Documentation - Performance page.
  3. There it explains you can analyze a bundle thanks to ./build/metafile* files generated by npx remix build.
  4. Head over to esbuild.github.io/analyze/
  5. Upload your file. It allows only 1 file!
  6. Something might be obvious!

Two culprits:

  1. Sevilla FC emblem weights 2.1 mb.
  2. 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”.