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

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 ;
};

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

• Nadmierne dzielenie: Dzielenie kodu na zbyt wiele małych fragmentów może w rzeczywistości obniżyć wydajność z powodu narzutu związanego z wykonywaniem wielu żądań sieciowych. Znajdź równowagę, która sprawdzi się w Twojej aplikacji.
• Nieprawidłowe umiejscowienie Suspense: Upewnij się, że Twoje granice <Suspense> są odpowiednio umieszczone, aby zapewnić dobre doświadczenie użytkownika. Unikaj, jeśli to możliwe, owijania całych stron w <Suspense>.
• Zapominanie o granicach błędów: Zawsze używaj granic błędów do obsługi potencjalnych błędów podczas leniwego ładowania.

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:

• Strony e-commerce: Leniwe ładowanie obrazów produktów, filmów i szczegółowych opisów produktów może znacznie skrócić początkowy czas ładowania stron produktów.
• Blogi i serwisy informacyjne: Leniwe ładowanie obrazów, osadzonych filmów i sekcji komentarzy może poprawić komfort czytania i zmniejszyć współczynnik odrzuceń.
• Pulpity nawigacyjne i panele administracyjne: Leniwe ładowanie złożonych wykresów, grafów i tabel danych może poprawić responsywność pulpitów nawigacyjnych i paneli administracyjnych.
• Aplikacje jednostronicowe (SPA): Leniwe ładowanie tras i komponentów może skrócić początkowy czas ładowania SPA i poprawić ogólne doświadczenie użytkownika.
• Aplikacje z internacjonalizacją: Ładowanie zasobów specyficznych dla danego regionu (tekst, obrazy itp.) tylko wtedy, gdy są potrzebne dla języka użytkownika. Na przykład, ładowanie niemieckich tłumaczeń dla użytkownika w Niemczech i hiszpańskich tłumaczeń dla użytkownika w Hiszpanii.

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.