Code splitting: route-level, component-level, vendor splitting

Dashboard-приложение шлёт 900 КБ JS на каждую страницу, потому что все routes делят один bundle. Homepage нуждается в React, chart-библиотеке, date picker и admin panel — хотя homepage никогда не показывает chart, не использует admin panel и не рендерит date picker. Три route стоимостей лишнего кода едут к юзеру при каждом визите на каждую страницу.

Route-level splitting

Самое ударное изменение. Каждый route — свой JavaScript chunk; навигация на /settings не скачивает bundle /editor. Каждый современный bundler поддерживает это из коробки.

• Webpack — конфигурация splitChunks, или React Router 6 с lazy().
• Vite — автоматический per-route splitting при использовании router-плагина.
• Next.js — автоматические per-page chunks в Pages и App Router. Каждый файл в /pages или /(routes) — отдельный chunk автоматически.
• Remix — route modules автоматически code-split; параллельная загрузка данных встроена.

Senior pattern: у каждого route — свой chunk. Если bundle analyzer показывает, что 40% homepage bundle — от /admin routes, route splitting не работает.

Component-level splitting

Компоненты не на critical path — модальники, сайдбары, drawers, admin tools, сложные charts — должны грузиться только когда нужны. Примитив — dynamic import().

// React
const DatePicker = React.lazy(() => import('./DatePicker'));
// Рендерить только внутри границы <Suspense>

// Vue
const DatePicker = defineAsyncComponent(() => import('./DatePicker.vue'));

Правило: любой компонент больше 30 КБ, не рендерящийся при первом paint, должен lazy-load. Типичные кандидаты: rich text editors, data visualisation библиотеки, map components, video players, admin panels.

Lazy-loaded компонент откладывает download до первого рендера. Когда юзер триггерит его (открывает modal, переходит на sub-route), chunk скачивается и парсится на месте. Чтобы избежать видимой задержки при первом взаимодействии, prefetch chunk на hover или когда триггер в зоне видимости:

<link rel="prefetch" href="/chunk-datepicker.js" />

Или используй React.lazy с import(/* webpackPrefetch: true */ './DatePicker').

Vendor splitting

Third-party библиотеки (React, React DOM, chart-библиотеки, utility-пакеты) меняются редко по сравнению с кодом самого приложения. Если они bundled с app-кодом, каждый новый деплой инвалидирует кешированную копию обоих у юзера — он перескачивает React, хотя React не изменился.

Vendor splitting помещает third-party библиотеки в отдельный chunk со своим content hash. Юзер кеширует vendor.abc123.js бессрочно. Деплой, изменяющий только app-код, инвалидирует app.def456.js, но vendor chunk остаётся в кеше. При повторных посещениях после деплоя скачивается только небольшой изменившийся chunk.

Как настроить: Webpack splitChunks.cacheGroups, Vite manualChunks, Next.js автоматический framework chunk (framework-*.js в _next/static/chunks/).

Граница critical path

Не всё lazy loading бесплатно. Откладывая компонент, при первом открытии chunk скачивается и парсится в foreground. Это улучшает LCP (меньший initial bundle), но может ухудшить INP для конкретного взаимодействия.

Правило: держи на critical path всё, что юзер видит в первые 2-3 секунды загрузки страницы. Откладывай всё остальное. Если компонент ниже fold, за кликом или на route, который юзер посещает вторым — он в lazy chunk.