𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

Ліниве завантаження (Lazy Loading) у React

Великі React-додатки створюють великі JavaScript-бандли. Великі бандли уповільнюють ваш сайт. Користувачі довше чекають на можливість взаємодіяти з вашим додатком. Це погіршує користувацький досвід.

Ліниве завантаження вирішує цю проблему. Воно завантажує компоненти лише тоді, коли вони потрібні користувачам. Ви перестаєте завантажувати все одночасно.

Переваги lazy loading:

• Менший розмір початкового бандла
• Швидше завантаження сторінок
• Кращий користувацький досвід
• Менше використання пропускної здатності
• Кращі показники Core Web Vitals

Як використовувати React.lazy() React надає функцію lazy() для динамічного імпорту компонентів. React завантажує код лише тоді, коли рендерить компонент.

Приклад коду:

import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

Ви повинні використовувати Suspense разом із lazy-компонентами. Suspense відображає fallback UI, поки компонент завантажується.

Приклад коду:

import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductDetail />
    </Suspense>
  );
}

Два правила успіху:

• Ваші компоненти повинні використовувати default exports.
• Оголошуйте lazy-імпорти поза функціями ваших компонентів.

Чи використовуєте ви lazy loading у своїх проєктах? Залиште коментар нижче. Я вам відповім.

Джерело: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk