Що таке Lazy loading компонентів?

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

Що таке 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 дає максимальний ефект:

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

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

Прийом	Що робить
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'ами
Економить пам'ять і трафік	Завантаження "за вимогою", а не "все одразу"

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

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

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

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

Premium

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