Kelly Mears

Code Splitting

Dividing an application bundle so a page downloads only the code it needs.

Web Platform1 min read198 words13 out · 14 in
also calledChunking

Code splitting breaks an application's JavaScript into separate files so a visitor downloads only what a given route or interaction requires. Without it, every page pays for every feature.

The mechanism is a boundary the Bundler recognizes — usually a dynamic import — which becomes a split point. Everything reachable only through that import moves into its own chunk, fetched on demand.

The part that surprises people is that splitting is a property of the module graph, not of intent. Bundlers commonly group every client reference reachable from a route into one shared chunk, so a page that renders any member of that group pulls the whole group. A server-side dynamic import does not split anything, because it never produced a client reference. A dynamic import called from a server component may not either. The boundary has to sit inside a client module to have any effect. See Module Graph and Client-Server Boundary.

This is why splitting must be measured rather than assumed. Two plausible refactors can both be byte-identical to the baseline. The verification is to build, download the chunks a page actually references, and search them for a marker from the code you meant to exclude.

See also10

Tree Shaking

Statically removing exports that nothing imports, shrinking the shipped bundle.

Web Platform12 connections

Lazy Loading

Deferring the fetch of a resource until it is needed, or until the browser is idle.

Web Platform21 connections

Performance Budget

A committed numeric ceiling on a page's cost, enforced automatically.

Web Platform26 connections

React Server Components

Components that execute only on the server and never ship their code to the browser.

Web Platform21 connections

Islands Architecture

Rendering a page as static HTML with small independently interactive regions.

Web Platform18 connections

Ground Truth

The measurement that arbitrates, as opposed to the artifact that merely reports.

Method99 connections

Server-Side Rendering

Producing a page's HTML on the server so the first response is already content.

Web Platform23 connections

Single-Page Application

A web app that loads one HTML page and then rewrites it with JavaScript as the user navigates, trading a slower, heavier first load for app-like transitions afterwards.

Web Platform20 connections

ES Modules

JavaScript's standard module system of import and export statements, whose static structure enables tree shaking and whose long coexistence with CommonJS caused years of tooling pain.

Web Platform10 connections

Long Task

Any stretch of main-thread work over 50 milliseconds, during which the page can't respond to input, and the techniques for breaking such work up.

Web Platform16 connections

Linked from14