Ładuj komponenty React leniwie przez lazy() i Suspense, dziel trasy w React Router, odkładaj obrazy z loading="lazy" i nie spowalniaj głównego obrazu. Demo na żywo w środku.
Lazy loading w React oznacza pobieranie kodu lub obrazów dopiero wtedy, gdy są potrzebne. Opakuj dynamiczny import w lazy(), wyrenderuj komponent wewnątrz granicy Suspense z fallbackiem, a React pobierze go przy pierwszym renderze. W przypadku obrazów to samo robi atrybut HTML loading="lazy", ale nigdy nie stosuj go do głównego obrazu widocznego bez przewijania.
Które narzędzie lazy loadingu pasuje do którego zadania
Duży bundle aplikacji każe każdemu odwiedzającemu czekać na kod, którego może nigdy nie użyć, na przykład wykres na karcie ustawień czy panel administracyjny. Lazy loading dzieli ten kod na osobne pliki, które przeglądarka pobiera na żądanie. Wypróbuj demo poniżej, a potem skopiuj wzorce dla komponentów, tras, obrazów i treści ładowanych przy przewijaniu.
Komponent, który możesz wyrenderować. Jego funkcja ładująca musi zwracać Promise, który rozwiązuje się do obiektu, którego właściwość default jest prawidłowym komponentem React, a dokładnie to daje dynamiczny import() eksportu domyślnego.
Nie. react.dev podaje, że zarówno zwrócony Promise, jak i jego rozwiązana wartość są buforowane, więc React nie wywołuje funkcji ładującej więcej niż raz. Demo na tej stronie pokazuje, że drugie otwarcie następuje natychmiast.
lazy() oczekuje eksportu domyślnego. Dla nazwanego zmapuj go w funkcji ładującej: lazy(() => import("./Charts").then((m) => ({ default: m.SalesChart }))).
Tak, w przypadku największego obrazu na ekranie. web.dev ustaliło, że leniwe ładowanie obrazów widocznych bez przewijania zwykle spowalniało Largest Contentful Paint, a leniwe ładowanie wyłącznie obrazów poniżej pierwszego ekranu zachowywało oszczędność danych bez tego kosztu.
React rzuca przyczynę odrzucenia podczas renderu, a najbliższy error boundary ją przechwytuje. Bez niego, według react.dev, React domyślnie usuwa interfejs aplikacji z ekranu.
Standardowy wzorzec: jedna deklaracja lazy na górze pliku i granica Suspense wokół miejsca, gdzie komponent się renderuje.
Plik wykresu nie jest pobierany, dopóki showChart po raz pierwszy nie zmieni się na true.
Obiekty tras w React Router przyjmują funkcję lazy, która zwraca właściwości trasy, więc każda strona staje się osobnym plikiem.
Strona raportów i jej loader pobierają się dopiero, gdy ktoś odwiedzi /reports.
Przeglądarki obsługują leniwe ładowanie obrazów natywnie. Oznacz obrazy poniżej pierwszego ekranu jako lazy, a głównemu obrazowi nadaj wysoki priorytet pobierania.
Szerokość i wysokość rezerwują miejsce, więc nic się nie przesuwa, gdy obraz się pojawi.
Dla treści, która nie jest obrazem, na przykład mapy lub widżetu opinii, mały hook informuje Cię, kiedy jej obszar wchodzi na ekran.
rootMargin równy 200px zaczyna ładowanie chwilę przed tym, jak obszar stanie się widoczny, a po pierwszym wyświetleniu observer się odłącza.
Ten przycisk renderuje komponent utworzony przez lazy(). Za pierwszym razem jego pobieranie jest symulowane i trwa 2 sekundy.
Pokaż wykres sprzedaży
Ukryj wykres sprzedaży
Ładowanie pliku wykresu...
Plik wykresu załadowany. Ukryj go i pokaż ponownie: pojawi się od razu, bo React zbuforował pierwsze ładowanie.
Sprzedaż według miesięcy
Zacznij za darmo · Bez karty kredytowej