august 2026

Code-splitting a production React app without anyone noticing

At IAmMaturity, the React frontend loaded the whole app on the first visit: dashboards, settings, admin views, everything, whether you needed it or not. The bounce rate showed the problem before any profiler did. People were leaving before the page became usable.

The fix wasn't a rewrite. It was code splitting: deciding what has to be in the first download and what can load when it's needed. React's lazy() and Suspense handle the mechanics. The real work is finding the natural seams: admin panels most users never open, modals that only appear after a click, a heavy chart library used on one dashboard. Each became its own chunk instead of extra weight for everyone.

Bundle chunks before and after code splitting

Where you split matters most. Split too much and one big download becomes a chain of small ones, which can end up slower. Split too little and nothing improves. The rule I settled on: split where a user's path through the app branches off, at the first click that most visitors won't make.

It went out one route at a time, so if a split caused a problem, only one page was affected. Real-user data confirmed it was working, because lab tests don't have patchy connections or old phones.

Bounce rate dropped by about 10%, with no incident and nobody outside the team noticing a deploy. That's what a good performance fix usually looks like: no flashy before and after, just a number that quietly gets better.