Glossary / Code splitting

Code splitting

Code splitting divides a built application into multiple JavaScript chunks that can be loaded at different times. It can reduce initial transfer and parse cost by deferring features, but adds chunk requests, dependency coordination, caching, and runtime failure modes.

Entry and dynamic boundaries

Bundlers can create chunks from multiple entry points, dynamic import() calls, route boundaries, or manual configuration. A static import usually belongs to the importing entry's initial dependency graph; a dynamic import commonly creates a deferred boundary. Shared dependencies may be extracted into common chunks according to bundler heuristics.

button.addEventListener('click', async () => {
  const { openReport } = await import('./report.js');
  await openReport();
});

The split is a build artifact; chunk names, grouping, preloading, and caching depend on the tool. Splitting every small module can increase request overhead and runtime bookkeeping, while one large bundle delays startup. The right boundary often aligns with a user journey or rarely used feature.

Deployment consistency

An older cached HTML/entry bundle may request chunks removed by a newer deployment. Use content hashes, retain prior assets long enough for cached clients, and deploy HTML/manifests atomically. Handle chunk-load failures with retry or a clear reload path, but avoid infinite retry loops. Ensure base URLs work behind subpaths/CDNs.

Engineering guidance

Inspect a bundle visualizer and measure real initial route and interaction costs. Split expensive or infrequently used features, not just to increase chunk count. Test deep links, offline/network failures, cache transitions between deployments, and simultaneous imports. Balance startup performance against delayed interaction latency.

Interview questions

  1. What does code splitting optimize? Initial code transfer and evaluation by deferring some code.
  2. What commonly creates a split point? Dynamic imports or configured entries/manual chunk rules.
  3. What is a stale chunk failure? Cached code asks for an asset no longer present after deployment.
  4. Why not split every module? Request and orchestration overhead can outweigh savings.
  5. How evaluate boundaries? Measure entry-route startup and later interaction latency for real user journeys.

References