How does Code Splitting work?

Question

Accepted Answer

Code Splitting is **breaking the bundle (assembled JS file) into several parts** that are loaded as needed.

**Simple analogy:** Imagine you are watching a TV series.
- **Without Code Splitting** — you download all seasons at once. You have to wait for all 100 gigabytes to load, although you only want to watch the first episode.
- **With Code Splitting** — you download one episode at a time. The first episode loaded — you watch. The second loads in the background.

**How it works in React:**

**1. Route-based splitting (by pages):**
```jsx
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Admin = lazy(() => import('./pages/Admin'));
```
Each page is a separate file. The user gets only the one they opened.

**2. Component-based splitting (by components):**
```jsx
const HeavyChart = lazy(() => import('./HeavyChart'));
```
The heavy chart will load only when the user clicks "Show".

**3. import() — dynamic import:**
```jsx
button.onclick = async () => {
    const module = await import('./utils/export');
    module.exportToExcel(data);
}
```

**Advantages:**
- Fast initial load.
- Less code loads on phones with poor internet.
- Traffic savings.

**In Next.js** Code Splitting works automatically — each page is already a separate bundle.

React: How does Code Splitting work?