<strong>Code splitting</strong> is breaking your JavaScript bundle into smaller chunks that can be loaded on demand. Instead of one huge file, users download only the code they need for the current page.
The Encyclopedia Analogy
Instead of carrying the entire encyclopedia, you take only the volume you need. Code splitting delivers only the JavaScript needed for the current page.
Full Encyclopedia (Monolithic Bundle)
Heavy, all at once
Individual Volumes (Code Chunks)
Load what you need
Reader (User)
Gets relevant content
Split into Chunks
Load Route Chunk
Run Only Needed Code
Define split points
const Home = lazy(() => import('./Home'))
Build creates chunks
Webpack/Vite creates separate files
User visits route
Navigate to /dashboard
Load chunk on demand
Download dashboard.chunk.js
Execute and render
Run code and show page
Wrong
"Code splitting is only for large apps"
Correct
<strong>Any app benefits from code splitting</strong>. Even small apps have routes users don't visit. Why make them download code for pages they never see?
E-commerce site:
Without splitting: 2MB bundle (Home + Products + Checkout + Admin)
With splitting: 200KB home chunk, load others on demand
User visits home → 200KB (10x smaller!)
User visits checkout → Load checkout chunk (300KB)
Admin users → Load admin chunk (500KB)