Frontend · interactive

Code splitting

A single bundle makes every visitor download the code for every page, including a 180 KB chart library most never see. Split by route, and load heavy parts only when they're needed.

1 chunk

main.js · downloaded465 KB

react + router 55design system 30home page 20settings page 35dashboard page 25chart library 180markdown editor 120

first load of /home: 465 KB · ~2.3 s on slow 4G

Every page downloads all 465 KB, including the chart library and the editor.

Bundling

Visitor opens

Step 1 of 4 · read left to right

1
JavaScript is expensive bytes
It has to download, parse and run before the page is interactive. On a mid-range phone that's slow.
Check with the bundle analyzer.
2
Route-based splitting
Each page gets its own chunk; shared code goes in a common one. Next.js and most routers do this automatically.
Common chunks are cached across pages.
3
Lazy-load heavy parts
Dynamic import() loads a component when it's about to be shown: charts, editors, maps, modals.
const Chart = lazy(() => import("./Chart"))
4
Prefetch what's likely next
Fetch the next chunk on hover or when idle, and show a skeleton while it loads. Don't split so finely that requests pile up.
Too many tiny chunks is its own problem.

In production

Tools and technologies

Bundlers split code by route and dynamic import.

Not tied to one language — use these names when you search docs or design a system.