Для чего нужно разделение кода?

Продвинутые темы

Разделение кода (code splitting) нужно, чтобы разбить бандл на части и загружать их по мере необходимости — это ускоряет первоначальную загрузку приложения.

Проблема

Один большой бандл долго грузится и выполняется — пользователь ждёт весь код, даже тот, что нужен позже (другие страницы, редкие модалки).

Решение — code splitting

Разбить код на чанки и грузить их лениво:

По маршрутам

Код каждой страницы — отдельный чанк, грузится при переходе:

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

По компонентам

Тяжёлые/редкие компоненты грузят по требованию:

const Chart = lazy(() => import('./Chart')); // грузится, когда нужен

Динамический импорт

button.onclick = async () => {
  const module = await import('./heavyModule');
  module.doWork();
};

Что даёт

Быстрый первый показ — грузится только нужный код.
Меньше начальный бандл → быстрее FCP/TTI.
Экономия трафика — не грузим неиспользуемое.
Кеширование — редко меняющиеся чанки кешируются отдельно.

Как работает

Бандлер (Webpack/Vite) при import() создаёт отдельный чанк, который грузится по требованию.

В React

React.lazy + Suspense для ленивых компонентов с fallback при загрузке.

Коротко для собеседования

Разделение кода (code splitting) разбивает бандл на части, загружаемые по необходимости (по маршрутам, компонентам, через import()), — ускоряет первый показ, уменьшает начальный бандл, экономит трафик. В React — React.lazy + Suspense. Бандлер создаёт отдельные чанки при динамическом импорте.