Что такое code splitting в React и зачем он нужен?

Question

Accepted Answer

## Начнём с основы

**Code splitting** — разбиение JavaScript-бандла на части, которые загружаются по мере надобности, а не одним огромным файлом при первом визите. Цель — ускорить First Contentful Paint / Time to Interactive и не тащить админку на лендинг.

### Как делают в React-экосистеме

1. Динамический `import()` — сборщик (Vite, Webpack, Rspack) создаёт отдельный chunk.
2. `React.lazy` + `Suspense` для компонентов.
3. Split по маршрутам: каждая страница — свой чанк.
4. Иногда — prefetch вероятных переходов (по hover/viewport).

```js
const Admin = React.lazy(() => import('./pages/Admin'));
```

### Что выигрываем и чем платим

Выигрыш: меньше килобайт на критическом пути; тяжёлые экраны (графики, редактор, админка) не блокируют старт. Цена: дополнительные round-trip за чанками; слишком мелкая нарезка даёт «waterfall» запросов; возможны дубли зависимостей между чанками — смотрят анализ бандла.

### Ответ на собеседовании

Связка: проблема большого бандла → разделение по роутам/фичам → `import()`/`lazy` → `Suspense` fallback → проверка метрик. Не путать с tree shaking (удаление мёртвого кода) — это соседняя, но другая оптимизация.

**Итог:** code splitting уменьшает начальный JS за счёт отложенной загрузки частей приложения и напрямую связан с `React.lazy`.