How we optimized a React mobile game for low-end devices through strategic bundle splitting — cutting memory by 70% and eliminating frame drops.
Bot Simulator is a mobile-first robot factory game built with React and Vite. Players manage autonomous robots, unlock tiers, customize skins, and compete on leaderboards — all rendered in real-time with Web Workers handling the simulation.
The game shipped as a single 451 KB JavaScript bundle. Every modal panel — achievements, leaderboards, game-over screens, robot selection — was loaded upfront on startup, even though players might never open most of them in a session.
On low-end Android devices (the majority of our global audience), this meant 21.5 MB of heap memory consumed before the first robot even moved. Startup frame drops hit 37 FPS on throttled devices — a noticeable stutter that undermined the game's polished feel.
We identified 7 heavy panel components that are only shown conditionally — never on initial load. Using React's built-in lazy loading and Suspense boundaries, we split each into its own chunk that loads on-demand when the player first opens it.
React.lazy() defers parsing and execution of panel code until the player actually needs it.
Each panel gets a Suspense wrapper with null fallback — chunks load so fast users see no spinner.
Components that used isOpen props were refactored to conditional renders, ensuring the chunk isn't fetched until truly needed.
Tested on simulated Moto G Power · 4x CPU throttle · 3G network
We didn't test on a MacBook Pro with gigabit fiber. We simulated the devices our actual players use.
We obsess over performance so your users don't have to think about it.
Start a Project