Code Splitting
Code splitting is a technique that breaks a large JavaScript bundle into smaller chunks that are loaded on demand, so users only download the code needed for the page they're viewing.
Modern web applications can have millions of lines of JavaScript. Without code splitting, all of this code gets bundled into a single file that every user must download before the application becomes interactive, even if they only visit one page. Code splitting divides the application bundle into smaller chunks based on routes, components, or features.
When they navigate to the settings page, that code loads on demand. Libraries used only in specific features are split into their own chunks. There are several approaches to code splitting.
In practice
- A SaaS dashboard reduced their initial JavaScript bundle from 3.2MB to 450KB through route-based code splitting, making the login page load in under 2 seconds instead of 8
- An e-commerce site lazy-loaded their product review component (which included a heavy rich-text editor), saving 200KB from the initial product page load
- A Next.js application automatically code-splits by route, so their 50-page application's homepage only loads 120KB of JavaScript instead of the total 4MB
- A web app split their charting library into a separate chunk, so users who never visit the analytics dashboard don't download the 500KB chart library
Not sure how this applies to you?
A senior engineer walks your site, your search presence and the way enquiries reach you, then writes down the three things worth fixing first. You keep the document either way.