Що таке "code splitting"?

JavaScriptJunior~2 хв читання

Що таке Code Splitting

Code splitting (розділення коду) - це процес, при якому твій JavaScript-бандл (зазвичай великий файл) розбивається на кілька менших частин (чанків). Браузер завантажує лише потрібні частини коду, а решту - за потреби (ліниво).

Ідея:

Замість одного гігантського bundle.js, завантажувати лише той код, який реально потрібен користувачу на цьому екрані.

Навіщо це потрібно

Без code splitting:

браузер скачує весь код застосунку одразу,
навіть той, який ніколи не буде виконаний.

Це збільшує:

розмір першого запиту (bundle.js може бути десятки МБ),
час завантаження сторінки,
час виконання скриптів (парсинг і компіляція JS).

З code splitting: Завантажується лише "шматочок" потрібного коду → швидший "Time to Interactive" Решта частин підвантажується лише при переході на інші сторінки чи дії користувача.

Як це працює

Code splitting зазвичай реалізується збирачем (наприклад, Webpack, Vite, Next.js) і спирається на динамічний імпорт:

javascript

// звичайний імпорт - завантажується одразу
import heavyLib from './heavy-lib';

// динамічний імпорт - завантажується за вимогою
const module = await import('./heavy-lib');

import() повертає Promise, який завантажує модуль лише тоді, коли він реально потрібен.

Приклад (React)

Без code splitting:

javascript

import About from './About';

function App() {
  return <About />;
}

Тут About завантажується одразу, навіть якщо користувач не відкриє цю сторінку.

З code splitting (лінива завантаження):

javascript

import React, { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Завантаження...</div>}>
      <About />
    </Suspense>
  );
}

Тут About буде завантажено лише коли він дійсно знадобиться - наприклад, при переході на сторінку "Про нас".

Типи code splitting

Тип	Що робить	Приклад
Entry splitting	Розділяє код за точками входу (наприклад, `admin.js`, `user.js`)	Webpack `entry`
Vendor splitting	Відокремлює сторонні бібліотеки (`react`, `lodash`) від твого коду	`optimization.splitChunks`
Dynamic import splitting	Ділить код за динамічними імпортами (lazy loading)	`import('./module')`
Route-based splitting	Ділення за сторінками (у Next.js, React Router тощо)	Автоматично за маршрутами

Як це робить Next.js

У Next.js code splitting вбудовано "з коробки":

Кожна сторінка (pages/about.tsx, pages/contact.tsx) стає окремим чанком.
Завантажується лише код поточної сторінки.
При навігації Next.js підвантажує JS для наступної сторінки "у фоні".

Тобто тобі не потрібно явно викликати import() - Next.js робить це автоматично.

Приклад вигоди

Сценарій	Без splitting	З splitting
Головна сторінка	Завантажується 3 MB JS	Завантажується 300 KB
Користувач іде на /about	Завантажується весь бандл	Довантажується ще 100 KB
Час завантаження	5 сек	1 сек до першого екрана

Підсумок

Пункт	Опис
Що це	Розділення коду застосунку на незалежні частини
Мета	Прискорити завантаження і підвищити продуктивність
Реалізація	Через `import()` або автоматично (Next.js, Webpack, Vite)
Переваги	Менший бандл, швидший TTI, менше пам'яті
Де використовується	React, Next.js, Vue, Angular, Webpack, Vite

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.