Code Splitting за маршрутами для швидкого SPA

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 в 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 у конфізі:

// 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. Це гарантує, що користувач не побачить порожній екран при збої завантаження чанка.

Що входить у нашу роботу

1. Аналіз поточного бандла за допомогою source-map-explorer та report.
2. Розбивка коду за маршрутами: dynamic import для кожного роута.
3. Оптимізація vendor-чанків: виділення спільних бібліотек, tree-shaking.
4. Налаштування prefetch та error boundary.
5. Тестування завантаження на 3G та 4G, замір Core Web Vitals.
6. Документація щодо структури чанків та рекомендації з подальшої оптимізації.

Виконання всіх етапів зазвичай займає від 1 до 3 днів залежно від складності проєкту. Вартість розраховується індивідуально після оцінки обсягу робіт. Середня економія на хостингу за рахунок зменшення бандла становить близько 15 000 грн на місяць.

Чому варто замовляти код-спліттинг у нас?

У нас понад 5 років досвіду в оптимізації React та Next.js застосунків. Ми гарантуємо, що початковий бандл не перевищить 200 KB gzipped, а кожен чанк буде менше 100 KB. Налаштуємо аналітику розмірів, щоб ви відслідковували регресії. Пишіть — оцінимо ваш проєкт за один день.

Терміни та вартість

Для готового роутера — 1 день. Повний цикл з аналізом, vendor-спліттингом та prefetch — 2-3 дні. Вартість розраховується індивідуально, виходячи зі складності застосунку. Зв'яжіться — ми надішлемо фіксований кошторис.

Оптимізуйте ваш проєкт: замовте code splitting за маршрутами, щоб прискорити завантаження та покращити користувацький досвід. Якщо у вас залишилися питання, отримайте консультацію — ми детально розповімо, як покращити продуктивність вашого SPA.