𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁
Большие React-приложения создают тяжелые JavaScript-бандлы. Большие бандлы замедляют работу вашего сайта. Пользователям приходится дольше ждать возможности взаимодействия с приложением. Это негативно сказывается на пользовательском опыте.
Ленивая загрузка решает эту проблему. Она загружает компоненты только тогда, когда они нужны пользователю. Вы перестаете загружать всё и сразу.
Преимущества ленивой загрузки:
- Меньший размер начального бандла
- Более быстрая загрузка страниц
- Улучшенный пользовательский опыт
- Снижение потребления трафика
- Улучшение показателей Core Web Vitals
Как использовать React.lazy()
React предоставляет функцию lazy() для динамического импорта компонентов.
React загружает код только в момент рендеринга компонента.
Example code: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
При использовании ленивых компонентов необходимо использовать Suspense.
Suspense отображает запасной (fallback) интерфейс, пока компонент загружается.
Example code: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
Два правила успеха:
- Ваши компоненты должны использовать экспорт по умолчанию (default exports).
- Объявляйте ленивые импорты вне функций ваших компонентов.
Используете ли вы ленивую загрузку в своих проектах? Оставьте комментарий ниже. Я вам отвечу.