Unifying three codebases and cutting load time
Merged three diverging codebases into one and improved both build time and first-paint.
- Role
- Frontend Engineer
- Timeframe
- Performance initiative
- Stack
- React · TypeScript · Build tooling · Web performance
- Consolidated separate desktop, mobile, and shared codebases into a single repo producing both builds.
- Reduced build time meaningfully by removing duplicated work across the three trees.
- Improved First Meaningful Paint with prefetching and code-splitting on the critical path.
An abstract case study. Details are generalised; no employer or confidential figures are included.
The problem
The product shipped from three separate codebases — desktop, mobile, and a shared layer — that had drifted apart over time. The same fix often had to be made in two or three places, builds were slow because work was duplicated, and the divergence was a steady source of subtle platform-specific bugs.
Separately, the first paint on key pages was slower than it should have been: too much was loaded up front before users could see meaningful content.
The approach
Consolidation first. I merged the three trees into a single repository that produces both the desktop and mobile builds from shared source. The wins compound: one place to fix a bug, one component to style, and far less duplicated compilation — which brought build time down.
Then the critical path. I profiled what blocked first paint and applied two classic-but-effective levers:
- Code-splitting so each route only pulls the JavaScript it actually needs.
- Prefetching likely-next resources during idle time, so navigation felt instant and First Meaningful Paint improved.
Outcome
One codebase instead of three, a faster build, and a quicker first paint on the pages that mattered. The deeper payoff was structural: a unified codebase made every subsequent feature cheaper to build and harder to break across platforms.
For more on shaving latency at the network layer, see edge functions and serverless.