Code splitting is a technique that breaks a JavaScript bundle into smaller, independently loadable pieces. By delivering only the code needed for the current view, it reduces the amount of data the browser must download initially. The remaining chunks are fetched later when the user navigates to parts of the application that require them.
Also called: bundle splitting, dynamic import
Why it matters
Clients benefit from faster page loads, which keeps visitors engaged and lowers bounce rates, ultimately supporting higher conversion and revenue. Smaller initial downloads also reduce data costs for users on limited connections, improving overall satisfaction.
How it works
When a bundler such as Webpack encounters a dynamic import() statement, it creates separate chunk files and adds a small runtime loader to the main bundle. At runtime, the browser requests the appropriate chunk via a network request, and the module is evaluated and inserted into the application’s module graph. In React, React.lazy() combined with Suspense abstracts this process for components.
The mistake people make
A common error is over‑splitting, creating many tiny chunks that trigger numerous HTTP requests and increase latency. This can manifest as noticeable pauses when navigating between pages, negating the performance gains of code splitting. Developers should aim for a balance, grouping related code into sensible chunks and preloading critical ones when appropriate.
