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

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

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

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

Контент

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

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

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

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

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

## Що таке Lazy Loading

**Lazy loading** - це **відкладене завантаження компонентів або модулів**.
Замість того щоб завантажувати **весь застосунок цілком** при старті,
React завантажує **лише ті частини**, які **реально потрібні прямо зараз**.

Решта компонентів підвантажуються **за вимогою (on demand)**.

---

### Приклад: без lazy loading

```javascript
import HeavyChart from './HeavyChart';

function Dashboard() {
  return (
    <div>
      <h1>Панель</h1>
      <HeavyChart />  {/* вантажиться одразу, навіть якщо не видно */}
    </div>
  );
}
```

Навіть якщо компонент `HeavyChart` показується рідко,
він **все одно завантажується одразу** разом з усім бандлом.
Якщо таких компонентів багато, **час завантаження сторінки зростає**.

---

### З lazy loading

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

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

function Dashboard() {
  return (
    <div>
      <h1>Панель</h1>

<Suspense fallback={<div>Завантаження графіка...</div>}>
        <HeavyChart />  {/* підвантажиться тільки коли дійде до нього */}
      </Suspense>
    </div>
  );
}
```

Тепер `HeavyChart` **завантажується лише при першому рендері**,
коли React реально дістанеться до нього в дереві компонентів.

---

## Як це працює "під капотом"

React використовує динамічний імпорт (`import()`) і **code splitting** (розділення коду).
При збірці (Webpack / Vite / Next.js) створюються окремі "чанки" (JS-файли).

```javascript
bundle.js → розбивається на:
- main.js (основний код)
- HeavyChart.chunk.js (важкий компонент)
- Settings.chunk.js
```

Коли користувач відкриває сторінку з `HeavyChart`,
браузер робить додатковий запит:

```javascript
GET /static/js/HeavyChart.chunk.js
```

і лише тоді завантажує код компонента.

---

## Компонент `Suspense`

Поки React завантажує лінивий компонент,
він **тимчасово показує заглушку**, вказану в `fallback`.

```javascript
<Suspense fallback={<Spinner />}>
  <HeavyChart />
</Suspense>
```

Коли завантаження завершене, React автоматично **замінює** `Spinner` **на компонент**.

---

## Приклад для маршрутизації

### Без lazy loading:

```javascript
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
</Routes>
```

Усі сторінки вантажаться в один великий бандл.

---

### З lazy loading:

```javascript
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

<Routes>
  <Route
    path="/"
    element={
      <Suspense fallback={<Spinner />}>
        <Home />
      </Suspense>
    }
  />
  <Route
    path="/dashboard"
    element={
      <Suspense fallback={<Spinner />}>
        <Dashboard />
      </Suspense>
    }
  />
  <Route
    path="/settings"
    element={
      <Suspense fallback={<Spinner />}>
        <Settings />
      </Suspense>
    }
  />
</Routes>
```

Тепер кожна сторінка вантажиться **окремим JS-файлом**,
лише при першому переході на неї.

---

## Коли це особливо корисно

Lazy loading дає максимальний ефект:

1. **При SPA з безліччю сторінок** (Dashboard, Settings, Profile, Reports тощо);
2. Для **важких залежностей** (графіки, редактори, карти, таблиці);
3. При **модалках** і **динамічних віджетах**, які показуються рідко;
4. Для **адмінок**, де лише частина сторінок використовується часто.

---

## Як комбінувати з іншими оптимізаціями

| Прийом | Що робить |
|---|---|
| **React.lazy() + Suspense** | Відкладене завантаження компонентів |
| **Dynamic import()** | Динамічний імпорт модулів без React |
| **Code splitting в Router** | Завантажує сторінки "за маршрутом" |
| **Preload/Prefetch** | Завчасне завантаження потрібних чанків |
| **SSR + lazy** | Можна підвантажувати клієнтські частини після гідратації |

---

## Lazy loading не лише для компонентів

Можна ліниво завантажувати:

- компоненти (`React.lazy`);
- хуки й утиліти (`import()` в момент використання);
- зображення (`loading="lazy"`);
- CSS-модулі (`import('./styles.css')` всередині компонентів);
- дані (`fetch` при першому відкритті розділу).

---

## Підсумок

| Що робить | Навіщо |
|---|---|
| Завантажує компонент лише при першому використанні | Зменшує розмір стартового бандла |
| Ділить код на чанки | Швидше завантаження і рендер сторінки |
| Працює з `React.lazy()` і `Suspense` | Керування відображенням і fallback'ами |
| Економить пам'ять і трафік | Завантаження "за вимогою", а не "все одразу" |

---

**Проста формула:**

> "Не завантажуй те, що користувач ще не бачить."

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

Для рев’юера

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

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