Back to glossary

Code Splitting

A feature of modern bundlers that allows you to split your code into various bundles which can then be loaded on demand or in parallel.

Categoryweb

Overview

Instead of sending one massive JavaScript file to the user, code splitting allows you to break the application into smaller 'chunks.' This improves the initial load time by only sending the code needed for the current page or feature.

Types of Splitting

  • Route-Based: Loading code for a specific page only when the user navigates to it.
  • Component-Based: Loading complex components (like a heavy chart or editor) only when they are needed.
  • Vendor Splitting: Separating third-party libraries into a separate bundle for better caching.

Implementation

Usually achieved using dynamic import() statements in JavaScript.

Related Terms

Lazy Loading