Code splitting

Code splitting делит приложение на chunks, загружаемые по требованию — по route, feature или тяжёлой библиотеке — чтобы первая навигация тащила меньше JavaScript.

					const AdminPanel = lazy(() => import('./AdminPanel'));

<Route path="/admin" element={
  <Suspense fallback={<Spinner />}>
    <AdminPanel />
  </Suspense>
} />
				

| Граница split | Хороший случай | |---------------|----------------| | Route | Dashboard vs маркетинговый сайт | | Feature flag | Beta-редактор не нужен при first paint | | Heavy lib | Charting, PDF, rich text editor |

Балансируйте split с **waterfall запросов**: слишком мелкие chunks увеличивают RTT. Prefetch вероятных следующих routes после idle. В Next.js — route-based splitting плюс `dynamic()` для client-only виджетов.

На интервью: route vs component splitting; границы Suspense; prefetch; связка с SSR/hydration cost.

Типовые ошибки: split всего на микро-chunks; lazy above-the-fold; нет error boundaries на lazy routes.

Компромисс — меньший initial bundle против лишних round trip и loading states.

Чеклист:

• Split на route и редких feature.
• Prefetch вероятных следующих routes.
• Минимум chunks на critical path.
• Waterfall в DevTools Network.