Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке "code splitting"?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке 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 |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати499 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.