Przewodnik po leniwym ładowaniu w React

Wprowadzenie

Podczas tworzenia dużych aplikacji React zazwyczaj używamy wielu obrazów i filmów, instalujemy pakiety/biblioteki innych firm, wykonujemy wywołania API i robimy wiele innych rzeczy. To naturalnie wydłuża czas ładowania naszej aplikacji i skutkuje ogromnym rozmiarem pakietu, co przyczynia się do słabszego doświadczenia użytkownika. To tam gdzie powolne ładowanie wchodzi na swoje miejsce. Pozwala nam załadować zawartość w samą porę, tuż przed wyświetleniem go w aplikacji.

Możemy uniknąć wstępnego ładowania zawartości, gdy jest ona nadal poza widokiem, i skoncentrować wszystkie zasoby na zawartości, która jest w widoku.

W tym przewodniku przyjrzymy się, jak używać React.lazy() i React.Suspense wdrożenie funkcji leniwego ładowania i dzielenia kodu, która pozwala nam obsłużyć dzielenie kodu bez konieczności instalowania dodatkowych bibliotek.

Co to jest leniwe ładowanie?

Kiedy uruchamiamy aplikację internetową React, zwykle łączy ona całą aplikację naraz, ładując wszystko, w tym całe strony aplikacji internetowej, obrazy, treści i wiele więcej, co może skutkować długim czasem ładowania i ogólnie niską wydajnością, w zależności od rozmiar treści i przepustowość Internetu w danym czasie.

Powolne ładowanie pozwala nam załadować określone komponenty tylko wtedy, gdy są potrzebne. Zazwyczaj również wykonujemy podział kodu w logiczne komponenty, które również mogą być leniwie ładowane treścią.

Na przykład, jeśli mamy stronę pulpitu nawigacyjnego, która po kliknięciu wyświetla wiele informacji z różnych źródeł, zawsze najlepiej jest leniwie ładować te komponenty i strony, aby ładowały się tylko wtedy, gdy są potrzebne lub wymagane przez użytkownika.

Uwaga: Proces rozdzielania dużego pakietu kodu na wiele pakietów, które mogą być ładowane dynamicznie w celu uniknięcia problemów z wydajnością związanych z pakietami o dużych rozmiarach, jest znany jako podział kodu. Odbywa się to bez zmniejszania ilości kodu w naszej aplikacji.

Podsumowując, leniwe ładowanie pozwala nam renderować komponenty lub elementy na żądanie, dzięki czemu nasza aplikacja jest bardziej wydajna i zapewnia lepsze wrażenia użytkownika.

Uwaga: Aplikacje jednostronicowe (SPA) są zaprojektowane tak, aby zawierały wszystkie strony i treści w jednym dokumencie/stronie. Dlatego leniwe ładowanie jest szczególnie przydatne podczas tworzenia SPA.

Jak zaimplementować Lazy Loading w React

Do tej pory widzieliśmy, czym jest leniwe ładowanie i dlaczego ważne jest jego wdrożenie. Teraz spójrzmy, jak możemy to zaimplementować w naszych aplikacjach React, korzystając z dwóch funkcji React, które ułatwiają dzielenie kodu i ładowanie z opóźnieniem – Reaguj.leniwy() i Reaguj.Napięcie.

React.lazy() to funkcja, która pozwala nam renderować import dynamiczny w taki sam sposób jak zwykłe komponenty. Korzystanie z dynamicznego importu wraz z React.lazy() umożliwi nam zaimportowanie komponentu tuż przed wyrenderowaniem go na ekranie. Ważną rzeczą do zapamiętania jest to, że React.lazy() przyjmuje funkcję jako argument – ​​ta funkcja musi wywołać dynamic import() w jego ciele.

React.Suspense pozwala nam określić rezerwę knebel który przyjmuje treść zastępczą, która byłaby używana jako wskaźnik ładowania podczas gdy wszystkie leniwe komponenty są ładowane.

Zacznijmy od przyjrzenia się, jak możemy zaimplementować leniwe ładowanie w naszych importowanych komponentach, a następnie jak możemy zaimplementować to w naszych trasach, aby strony nie były ładowane, dopóki do nich nie przejdziemy.

Pierwsze kroki

Załóżmy, że mamy naszą aplikację React i zaimportowaliśmy About składnik do Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Możemy teraz zaimplementować leniwe ładowanie, korzystając z React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Uwaga: React.lazy() użyty w ten sposób zwraca a Promise obiekt. Ta obietnica sprowadza się do modułu, który zawiera komponent React, który chcemy w nim leniwie ładować default eksport.

Wdrożyliśmy leniwe ładowanie za pomocą React.lazy(), ale powyższy kod zawsze wyrzuci błąd mówiąc, że nasz “React component suspended while rendering, but no fallback UI was specified”. Można to naprawić, owijając komponent React.Suspense„s fallbackz i dołączanie rekwizytów awaryjnych, jak wyjaśniliśmy wcześniej:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Uwaga: Rekwizyt zastępczy może wyświetlać komponent przed załadowaniem oryginalnej zawartości.

Dodatkowo możemy zdecydować się na destruktura import React, aby kod był czystszy i bardziej czytelny:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Do tej pory widzieliśmy, jak zaimplementować leniwe ładowanie w naszych importowanych komponentach. Zobaczmy teraz, jak zaimplementować to w naszych trasach podczas routingu z routerem React.

Jak zaimplementować leniwe ładowanie za pomocą routera React

Routing z opóźnieniem jest w rzeczywistości dobrą praktyką w przypadku tras, które mają dużo treści i mogą spowolnić czas ładowania aplikacji. Implementacja opóźnionego ładowania dla tras React jest prawie identyczna z tym, co robiliśmy wcześniej, gdy leniwe ładowanie dynamicznie importowanych komponentów.

Lazy loading React Routes odnosi się do dynamicznego importowania komponentu tylko wtedy, gdy jest to potrzebne. Załóżmy na przykład, że w naszej aplikacji mamy dwie trasy i dwa komponenty reprezentujące te trasy. Jeżeli wspomnianą trasę zaimplementujemy w następujący sposób, każdy komponent zostanie załadowany dopiero wtedy, gdy nawigujemy do odpowiedniej trasy:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Wnioski

W tym przewodniku dowiedzieliśmy się, czym są lazy loading i dzielenie kodu, jak je zaimplementować oraz że najlepszym miejscem do implementacji lazy loading są trasy. Pozwala to uniknąć jednoczesnego renderowania całej strony, co może skutkować wolniejszym ładowaniem w przypadku stron z dużą ilością treści.