What a bundle actually costs: download, parse, compile, execute

A developer ships a new feature on a Friday. On their MacBook the page loads in 800 ms — feels fine. By Monday, bounce rate is up 20%. A colleague tests on a mid-range Android phone and watches the page sit blank for 8 seconds. The feature was fine. The bundle was not.

Four phases, one cost

When a browser downloads a JavaScript file, it does not just “load” the code. It runs four sequential phases before a single user interaction is possible.

Download — the bytes travel over the network. On a 4G connection, 200 KB gzip’d takes 150-500 ms depending on signal quality.

Parse — the JS engine walks every byte and builds an abstract syntax tree (AST). V8 parses at roughly 1-2 MB/sec on a fast laptop CPU, but only 200-400 KB/sec on a median Android device. A 500 KB uncompressed bundle takes about 1.5-2 seconds to parse on mid-range mobile.

Compile — the engine converts the AST to bytecode, then to optimised machine code. V8 uses a tiered pipeline (Ignition → Sparkplug → TurboFan). Compile cost grows roughly linearly with how much code actually runs at startup.

Execute — the bundle’s top-level code runs synchronously: framework initialisation, store creation, route registration. For a typical React + Redux app this blocks the main thread for 100-500 ms.

The full chain on mid-range mobile for a 500 KB uncompressed bundle: download 800 ms + parse 1.5 s + compile 300 ms + execute 400 ms = roughly 3 seconds before the user can click anything. Each phase is a separate lever; none of them helps unless you address it directly.

Why “works on my laptop” fails

A developer’s MacBook M-series has a single-thread CPU speed roughly 4-8x faster than a median Android phone (Snapdragon 6 or 7-series equivalent). A 5G or Wi-Fi connection helps with download — but parse, compile, and execute happen entirely on the user’s CPU. Faster network does not move that needle at all.

Most users in global markets are on mid-range or older hardware. Teams that test only on flagship phones or development machines systematically underestimate real-user experience. Chrome DevTools has a 4x CPU throttling mode that approximates mid-range Android; using it for every performance check catches the gap before it reaches production.

The bundle-budget discipline

A bundle budget is a maximum number of bytes (typically gzip’d JS, CSS, images split separately) that a route is allowed to ship, enforced at CI time. Without a budget, bundle size grows by accretion: each engineer adds a library, each library adds a few KB, no single PR is to blame, but after six months the bundle has doubled. With a budget, every PR that pushes past the cap fails CI — the team either justifies the addition or finds a smaller alternative.

The budget converts performance from an intention into a constraint. It does for client-side bytes what an SLO does for server-side latency: makes it measurable, enforced, and owned.