What Is Code Splitting and How to Use It

Short answer

Code splitting breaks a large JavaScript bundle into smaller chunks that load on demand. It improves initial load time and caching efficiency.

How it works

Bundlers like Webpack and Rollup analyze the dependency graph and create separate output files. Each chunk can be loaded independently by the browser.

Example

// Before: one large bundle
import HeavyChart from './HeavyChart';

// After: lazy-loaded chunk
const HeavyChart = React.lazy(() => import('./HeavyChart'));

Why it matters

Users rarely need every feature on first load. Code splitting delivers only what is necessary, reducing parse and compile time on the main thread.