Leniwe ładowanie w React
Duże aplikacje React tworzą duże paczki JavaScript. Duże paczki spowalniają Twoją stronę. Użytkownicy muszą dłużej czekać na interakcję z aplikacją. To pogarsza doświadczenie użytkownika.
Leniwe ładowanie rozwiązuje ten problem. Ładuje komponenty tylko wtedy, gdy są one potrzebne użytkownikom. Przestajesz ładować wszystko naraz.
Korzyści z leniwego ładowania:
- Mniejszy rozmiar początkowej paczki
- Szybsze ładowanie stron
- Lepsze doświadczenie użytkownika
- Mniejsze zużycie transferu danych
- Lepsze wyniki Core Web Vitals
Jak używać React.lazy() React udostępnia funkcję o nazwie lazy(), która pozwala na dynamiczny import komponentów. React pobiera kod dopiero w momencie renderowania komponentu.
Przykładowy kod: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
Musisz używać Suspense wraz z komponentami lazy. Suspense wyświetla interfejs zastępczy (fallback UI), podczas gdy komponent się ładuje.
Przykładowy kod: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
Dwie zasady sukcesu:
- Twoje komponenty muszą używać eksportów domyślnych (default exports).
- Deklaruj importy lazy poza funkcjami komponentów.
Czy używasz leniwego ładowania w swoich projektach? Zostaw komentarz poniżej. Odpowiem na niego.