Glossary / Chunk loading

Chunk loading

Chunk loading is the runtime process of fetching and evaluating a separately emitted JavaScript bundle or asset when an entry point or dynamic import needs it. It connects build-time code splitting to runtime networking, cache policy, module evaluation, and error handling.

Runtime mechanics

A bundler emits a manifest or runtime mapping from module/chunk IDs to URLs. A dynamic import triggers loader logic that requests the chunk, evaluates or registers its modules, and resolves with the namespace. Multiple consumers of the same chunk are often deduplicated by runtime cache, but failure caching and retry semantics vary by tool. Public base paths, asset naming, cross-origin policy, CSP, and CDN behavior must match deployment.

A chunk can fail due to offline state, transient HTTP errors, stale HTML referencing deleted assets, incorrect base URL, CSP, MIME type, or syntax/runtime incompatibility. The import promise rejects, so UI code should present a recoverable state. Retrying a permanently missing content hash is not useful; version-aware reload or retaining old assets may be needed.

Caching and release strategy

Content-hashed filenames support long-lived immutable caching, while HTML and manifests should revalidate so clients discover current assets. Deploy all referenced assets before exposing new HTML, and retain previous assets for clients with cached entry points. Service workers can alter cache lifetimes and require explicit versioning strategies.

Engineering guidance

Test with throttled/offline networks and production-like asset paths. Observe chunk load failures, include source maps according to error-reporting policy, and avoid exposing sensitive source maps unintentionally. Ensure lazy modules don't rely on initialization that only happens in a different entry graph.

Interview questions

  1. What does a dynamic import resolve after loading? A module namespace after the bundler/runtime has fetched and evaluated required chunks.
  2. Why can a chunk 404 after deployment? A stale cached entry references an old asset that was removed.
  3. How mitigate stale chunk issues? Content hashes, atomic deployment, retaining old assets, and a controlled reload path.
  4. Should all failures retry? No; distinguish transient network failures from permanent missing or incompatible assets.
  5. What deployment settings matter? Base path, cache headers, CSP, MIME type, CDN consistency, and service-worker policy.

References