Code Splitting — Explained with Examples

Code splitting breaks bundles into smaller lazy-loaded chunks loaded on demand, reducing initial page load time and improving performance.

Code splitting divides your application into separate chunks that load when needed, rather than one monolithic bundle. Techniques include entry point splitting (multiple entry pages), dynamic imports (import() syntax for routes or components), and vendor splitting (separating third-party libraries from application code).

Think of code splitting like a streaming service versus downloading an entire series. Instead of downloading all 10 episodes before watching (single bundle), you stream episode 1 immediately and load episode 2 while you watch (lazy loading). You never download episodes you never watch.

Dynamic imports are the primary mechanism for code splitting. Bundlers automatically create separate chunks for dynamically imported modules. React’s React.lazy and Vue’s async components are built on this pattern.

// Static import (bundled together)
import { HeavyComponent } from './HeavyComponent';

// Dynamic import (separate chunk, loaded on demand)
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

// Route-level code splitting
const Dashboard = () => import('./routes/Dashboard');
const Settings = () => import('./routes/Settings');

Effective code splitting requires analyzing bundle composition, identifying large modules, and deciding split points based on user navigation patterns. Over-splitting can hurt performance due to network overhead.

Tree Shaking, Lazy Loading, Bundling, Webpack

Tree Shaking