Code splitting is a JavaScript performance optimization technique that divides a large JavaScript bundle into smaller, separate chunks, which are then loaded on demand rather than all at once when a page first loads.
To understand why code splitting matters, it helps to first understand how modern JavaScript applications are typically built. Tools called bundlers - such as Webpack, Rollup, or Vite - take all the JavaScript files in a project and combine them into a single file, often called a bundle. While this reduces the number of network requests a browser needs to make, it can create a different problem: that single bundle can grow very large as an application scales. A visitor landing on the homepage ends up downloading JavaScript intended for the settings page, the admin panel, and every other part of the application - code they may never actually use.
Code splitting solves this by instructing the bundler to produce multiple smaller files instead of one monolithic bundle. The browser then only downloads the chunk it needs for the current page or interaction. Additional chunks are fetched later, as the user navigates or triggers specific features. This pattern is also closely related to lazy loading, which is the broader concept of deferring the loading of any resource - images, components, or scripts - until it is actually needed.
There are several common strategies for applying code splitting. Route-based splitting is the most straightforward: each page or route in an application gets its own chunk, so only the code for the current view is loaded upfront. Component-based splitting goes further, isolating heavy or rarely used UI components - such as a rich text editor or a data visualization library - so they are only fetched when a user actually encounters them. Vendor splitting separates third-party library code from application code, which can improve caching since library files change less frequently than application logic.
The performance impact of code splitting is directly measurable in metrics that matter for both user experience and search engine rankings. Reducing the amount of JavaScript parsed and executed on initial load improves Core Web Vitals scores, particularly metrics related to interactivity and visual stability. Search engines and tools like Google Lighthouse reward pages that load and become interactive quickly, making code splitting a relevant concern for SEO as well as development.
Most modern JavaScript frameworks, including React, Vue, and Angular, have built-in support or well-established patterns for code splitting. In React, for example, the React.lazy function combined with Suspense makes it straightforward to split a component into its own chunk with minimal configuration. The underlying bundler handles the file generation automatically, meaning developers can adopt code splitting incrementally without restructuring an entire codebase.