Code Splitting по маршрутам для быстрого SPA
Типовой проект на React с 50 страницами без оптимизации имеет начальный бандл 2.5 МБ, что приводит к LCP более 5 секунд на 3G. Пользователь ждёт загрузки страницы оформления заказа, хотя только открыл каталог. Мы решаем это разбивкой кода по маршрутам: каждый роут загружается отдельным чанком. Вместо монолитного JS-файла браузер получает только то, что нужно сейчас. Итог — LCP падает на 40–60%, а TTFB улучшается за счёт меньшего объёма данных. Дополнительно снижается потребление памяти браузером и уменьшается количество сетевых запросов при старте. По нашим данным, типовой проект сокращает начальный бандл с 2.5 МБ до 500 КБ gzipped.
Какую проблему решает code splitting по маршрутам?
Без разбивки весь код приложения — каталог, корзина, админка — скачивается при входе. Это замедляет первую загрузку, увеличивает потребление трафика и ухудшает Core Web Vitals. Code splitting по маршрутам устраняет эти проблемы: каждый переход загружает только нужный чанк, а prefetch по hover делает навигацию мгновенной. В отличие от простого минифицирования, code splitting даёт в 2–3 раза большее сокращение времени загрузки, так как уменьшает объём кода, выполняемого при старте. Кроме того, экономия на CDN-трафике может достигать 30 000–50 000 ₽ в месяц для проекта с 10 000 уникальных посетителей в день.
| Компонент | До code splitting | После |
|---|---|---|
| Главная | 800 KB | 150 KB |
| Каталог | 900 KB | 200 KB |
| Корзина | 600 KB | 120 KB |
Как мы реализуем code splitting в React
React Router v6 + React.lazy
Используем React.lazy для каждого маршрута и Suspense для ожидания загрузки:
// router/index.tsx const Home = lazy(() => import('@/pages/Home')) const Catalog = lazy(() => import('@/pages/Catalog')) const Checkout = lazy(() => import('@/pages/Checkout')) const router = createBrowserRouter([ { path: '/', element: <AppLayout />, children: [ { index: true, element: <Home /> }, { path: 'catalog', element: <Catalog /> }, { path: 'checkout', element: <Checkout /> }, ], }, ]) function App() { return ( <Suspense fallback={<PageLoader />}> <RouterProvider router={router} /> </Suspense> ) } Vite создаёт отдельный чанк для каждого динамического импорта. Для управления именами чанков используем manualChunks в конфиге:
Пример конфигурации manualChunks
// vite.config.ts manualChunks: { 'vendor-react': ['react', 'react-dom', 'react-router-dom'], 'vendor-ui': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'], } Next.js App Router
В Next.js code splitting работает из коробки: каждая page.tsx — отдельный сегмент. Для тяжёлых компонентов внутри страниц используем dynamic():
const FilterPanel = dynamic(() => import('@/components/FilterPanel'), { loading: () => <FilterSkeleton />, }) const StoreMap = dynamic(() => import('@/components/StoreMap'), { ssr: false, loading: () => <div className="h-96 bg-muted animate-pulse" />, }) Prefetching и Error Boundary
Загружаем чанк заранее по hover на ссылке: onMouseEnter вызывает import('./Page'). В Next.js <Link> автоматически prefetchит чанки для видимых ссылок. Для обработки ошибок загрузки (нет сети, 404) добавляем ChunkErrorBoundary, который показывает кнопку "Обновить" и перезагружает страницу. Как указано в документации React, Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI. Это гарантирует, что пользователь не увидит пустой экран при сбое загрузки чанка.
Что входит в нашу работу
- Анализ текущего бандла с помощью source-map-explorer и report.
- Разбивка кода по маршрутам: dynamic import для каждого роута.
- Оптимизация vendor-чанков: выделение общих библиотек, tree-shaking.
- Настройка prefetch и error boundary.
- Тестирование загрузки на 3G и 4G, замер Core Web Vitals.
- Документация по структуре чанков и рекомендации по дальнейшей оптимизации.
Выполнение всех этапов обычно занимает от 1 до 3 дней в зависимости от сложности проекта. Стоимость рассчитывается индивидуально после оценки объёма работ. Средняя экономия на хостинге за счёт уменьшения бандла составляет около 15 000 ₽ в месяц.
Почему стоит заказывать код-сплиттинг у нас?
У нас 5+ лет опыта в оптимизации React и Next.js приложений. Мы гарантируем, что начальный бандл не превысит 200 KB gzipped, а каждый чанк будет меньше 100 KB. Настроим аналитику размеров, чтобы вы отслеживали регрессии. Пишите — оценим ваш проект за один день.
| Целевой показатель | Значение |
|---|---|
| Initial bundle | <200 KB gzipped |
| Каждый route chunk | <100 KB gzipped |
| LCP improvement | 40-60% |
| Срок настройки | от 1 дня |
Сроки и стоимость
Для готового роутера — 1 день. Полный цикл с анализом, vendor-сплиттингом и prefetch — 2-3 дня. Стоимость рассчитывается индивидуально, исходя из сложности приложения. Свяжитесь — мы пришлём фиксированную смету.
Оптимизируйте ваш проект: закажите code splitting по маршрутам, чтобы ускорить загрузку и улучшить пользовательский опыт. Если у вас остались вопросы, получите консультацию — мы подробно расскажем, как улучшить производительность вашего SPA.