Code Splitting
The practice of breaking a JavaScript bundle into smaller chunks that are loaded on demand, reducing initial page load time.
Detailed Explanation
Code splitting divides your JavaScript into multiple bundles that are loaded as needed. Instead of loading the entire application code upfront, only the code needed for the current page or interaction is loaded. This reduces initial bundle size and speeds up time to interactive.
Common strategies: route-based splitting (each page is a chunk), component-based splitting (heavy components are chunks), and vendor splitting (third-party libraries are separate chunks). Tools: webpack (SplitChunksPlugin), Vite (dynamic imports), and Next.js (automatic code splitting).
Why It Matters
Code splitting reduces initial JavaScript payload, improving load time and time to interactive. It is essential for large applications.
Real-World Example
A dashboard app splits code by route: the login page loads 50KB, the main dashboard loads 200KB, and the settings page loads 30KB. Users only load the code for the page they visit.
When to Use
For any application with more than a few routes or heavy components. Essential for large SPAs, admin dashboards, and feature-rich applications.
Advantages
- Faster initial page load
- Reduced time to interactive
- Better Core Web Vitals
- Smaller bundle sizes per page
- Parallel loading of chunks
Disadvantages
- Adds build configuration complexity
- Can cause loading delays for deferred chunks
- Requires understanding of bundler configuration
- Debugging across chunks is harder
- May cause layout shifts during loading
Related Terms
Frequently Asked Questions
How do I implement code splitting?
Use dynamic imports: `import("./HeavyComponent").then(mod => mod.default)`. Modern bundlers (webpack, Vite, esbuild) automatically code-split dynamic imports.
What is route-based code splitting?
Each route (page) is a separate JavaScript chunk. When the user navigates, only the new route's code is loaded. React Router + dynamic imports or Next.js pages handle this automatically.
Does code splitting improve performance?
Yes. By reducing initial bundle size, code splitting improves FCP, LCP, and TTI. The improvement is proportional to the amount of code deferred.
What is the difference between code splitting and tree shaking?
Code splitting breaks bundles into chunks loaded on demand. Tree shaking removes unused code from bundles. Both reduce bundle size but work differently: splitting is about when code loads; shaking is about what code is included.
How do I know what to split?
Analyze your bundle with webpack-bundle-analyzer or source-map-explorer. Split: route-level code, heavy libraries (charts, editors), and features used by few users. Start with route-based splitting.