Polski

Odkryj szybsze czasy ładowania i lepszą wydajność aplikacji React dzięki leniwemu ładowaniu i dzieleniu kodu komponentów. Poznaj praktyczne techniki i najlepsze praktyki.

React Lazy Loading: Dzielenie kodu komponentów w celu optymalizacji wydajności

W dzisiejszym dynamicznym świecie cyfrowym wydajność stron internetowych ma kluczowe znaczenie. Użytkownicy oczekują natychmiastowej gratyfikacji, a wolne czasy ładowania mogą prowadzić do frustracji, porzuconych koszyków i negatywnego wizerunku marki. W przypadku aplikacji React optymalizacja wydajności jest kluczowa dla zapewnienia płynnego i angażującego doświadczenia użytkownika. Jedną z potężnych technik osiągnięcia tego celu jest leniwe ładowanie (lazy loading) z dzieleniem kodu komponentów.

Czym jest Leniwe Ładowanie i Dzielenie Kodu?

Leniwe ładowanie to technika, w której zasoby, takie jak obrazy, skrypty i komponenty, są ładowane tylko wtedy, gdy są potrzebne, a nie wszystkie naraz podczas początkowego ładowania strony. To znacznie zmniejsza ilość danych, które muszą być pobrane i przetworzone z góry, co skutkuje szybszymi początkowymi czasami ładowania i lepszą postrzeganą wydajnością.

Dzielenie kodu (ang. code splitting) to proces dzielenia kodu aplikacji na mniejsze, łatwiejsze w zarządzaniu części (lub paczki). Pozwala to przeglądarce pobrać tylko kod niezbędny do początkowego widoku, odkładając ładowanie innego kodu do momentu, gdy będzie on rzeczywiście wymagany. Leniwe ładowanie wykorzystuje dzielenie kodu do ładowania określonych komponentów tylko wtedy, gdy mają zostać wyrenderowane.

Dlaczego warto używać Leniwego Ładowania i Dzielenia Kodu w React?

Oto dlaczego warto włączyć leniwe ładowanie i dzielenie kodu do swoich projektów React:

Jak zaimplementować Leniwe Ładowanie w React

React zapewnia wbudowane wsparcie dla leniwego ładowania za pomocą komponentów React.lazy i Suspense. Oto przewodnik krok po kroku:

1. Użycie React.lazy()

React.lazy() pozwala na dynamiczne importowanie komponentów, skutecznie dzieląc kod na oddzielne części. Przyjmuje funkcję, która wywołuje import(), zwracającą Promise, która rozwiązuje się do komponentu.


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

W tym przykładzie MyComponent zostanie załadowany tylko wtedy, gdy będzie miał zostać wyrenderowany.

2. Otaczanie komponentem <Suspense>

Ponieważ React.lazy() używa dynamicznych importów, które są asynchroniczne, musisz otoczyć leniwie ładowany komponent komponentem <Suspense>. Komponent <Suspense> pozwala wyświetlić interfejs zastępczy (np. wskaźnik ładowania), podczas gdy komponent jest ładowany.


import React, { Suspense } from 'react';

function MyPage() {
  return (
    Ładowanie...
}> ); }

W tym przykładzie komunikat Ładowanie... będzie wyświetlany podczas wczytywania MyComponent. Gdy komponent zostanie załadowany, zastąpi on interfejs zastępczy.

3. Praktyczny przykład: Leniwe ładowanie dużej galerii obrazów

Rozważmy scenariusz, w którym masz dużą galerię obrazów. Ładowanie wszystkich obrazów naraz może znacząco wpłynąć na wydajność. Oto jak można leniwie ładować obrazy za pomocą React.lazy() i <Suspense>:


import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Obraz 1' },
    { id: 2, src: 'image2.jpg', alt: 'Obraz 2' },
    { id: 3, src: 'image3.jpg', alt: 'Obraz 3' },
    // ... więcej obrazów
  ];

  return (
    
{images.map(image => ( Ładowanie obrazu...
}> ))} ); } export default ImageGallery;

Oraz komponent Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

W tym przykładzie każdy obraz jest otoczony komponentem <Suspense>, więc komunikat o ładowaniu będzie wyświetlany dla każdego obrazu podczas jego wczytywania. Zapobiega to blokowaniu całej strony podczas pobierania obrazów.

Zaawansowane techniki i uwagi

1. Granice błędów (Error Boundaries)

Podczas korzystania z leniwego ładowania ważne jest, aby obsługiwać potencjalne błędy, które mogą wystąpić w trakcie procesu ładowania. Granice błędów (Error Boundaries) mogą być użyte do przechwytywania tych błędów i wyświetlania interfejsu zastępczego. Możesz utworzyć komponent granicy błędu w ten sposób:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Zaktualizuj stan, aby następne renderowanie pokazało interfejs zastępczy.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Możesz również zalogować błąd do serwisu raportowania błędów
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Możesz wyrenderować dowolny niestandardowy interfejs zastępczy
      return 

Coś poszło nie tak.

; } return this.props.children; } } export default ErrorBoundary;

Następnie otocz komponent <Suspense> komponentem <ErrorBoundary>:



  Ładowanie...}>
    
  


Jeśli podczas ładowania MyComponent wystąpi błąd, <ErrorBoundary> przechwyci go i wyświetli interfejs zastępczy.

2. Renderowanie po stronie serwera (SSR) i Leniwe Ładowanie

Leniwe ładowanie może być również używane w połączeniu z renderowaniem po stronie serwera (SSR), aby poprawić początkowy czas ładowania aplikacji. Wymaga to jednak dodatkowej konfiguracji. Musisz upewnić się, że serwer potrafi poprawnie obsługiwać dynamiczne importy, a leniwie ładowane komponenty są odpowiednio hydratowane po stronie klienta.

Narzędzia takie jak Next.js i Gatsby.js zapewniają wbudowane wsparcie dla leniwego ładowania i dzielenia kodu w środowiskach SSR, co znacznie ułatwia proces.

3. Wstępne ładowanie leniwie ładowanych komponentów

W niektórych przypadkach możesz chcieć wstępnie załadować leniwie ładowany komponent, zanim będzie on rzeczywiście potrzebny. Może to być przydatne dla komponentów, które prawdopodobnie zostaną wkrótce wyrenderowane, takich jak komponenty znajdujące się poniżej widocznej części strony, ale które prawdopodobnie zostaną przewinięte do widoku. Możesz wstępnie załadować komponent, wywołując ręcznie funkcję import():


import('./MyComponent'); // Wstępne ładowanie MyComponent

To rozpocznie ładowanie komponentu w tle, dzięki czemu będzie on dostępny szybciej, gdy zostanie faktycznie wyrenderowany.

4. Dynamiczne importy z magicznymi komentarzami Webpack

„Magiczne komentarze” Webpacka umożliwiają dostosowanie nazw generowanych fragmentów kodu. Może to być pomocne przy debugowaniu i analizowaniu struktury paczek Twojej aplikacji. Na przykład:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Spowoduje to utworzenie fragmentu kodu o nazwie „my-component.js” (lub podobnej) zamiast nazwy generycznej.

5. Unikanie typowych pułapek

Rzeczywiste przykłady i przypadki użycia

Leniwe ładowanie można zastosować w szerokim zakresie scenariuszy w celu poprawy wydajności aplikacji React. Oto kilka przykładów:

Przykład: Międzynarodowa strona e-commerce

Wyobraź sobie stronę e-commerce sprzedającą produkty na całym świecie. Różne kraje mogą mieć różne waluty, języki i katalogi produktów. Zamiast ładować wszystkie dane dla każdego kraju z góry, możesz użyć leniwego ładowania, aby załadować dane specyficzne dla lokalizacji użytkownika tylko wtedy, gdy odwiedza on stronę.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkcja do określania kraju użytkownika

  return (
    Ładowanie treści dla Twojego regionu...}>
      
      
    
  );
}

Podsumowanie

Leniwe ładowanie i dzielenie kodu komponentów to potężne techniki optymalizacji wydajności aplikacji React. Ładując komponenty tylko wtedy, gdy są potrzebne, możesz znacznie skrócić początkowy czas ładowania, poprawić doświadczenie użytkownika i wzmocnić swoje SEO. Wbudowane w React komponenty React.lazy() i <Suspense> ułatwiają implementację leniwego ładowania w Twoich projektach. Wykorzystaj te techniki, aby tworzyć szybsze, bardziej responsywne i bardziej angażujące aplikacje internetowe dla globalnej publiczności.

Pamiętaj, aby zawsze brać pod uwagę doświadczenie użytkownika podczas implementacji leniwego ładowania. Zapewnij informacyjne interfejsy zastępcze, elegancko obsługuj potencjalne błędy i starannie analizuj wydajność swojej aplikacji, aby upewnić się, że osiągasz pożądane rezultaty. Nie bój się eksperymentować z różnymi podejściami i znaleźć najlepsze rozwiązanie dla swoich konkretnych potrzeb.

React Lazy Loading: Dzielenie kodu komponentów w celu optymalizacji wydajności | MLOG