Podział kodu za pomocą React.lazy i Susense

Nigdy nie musisz wysyłać użytkownikom więcej kodu niż jest to konieczne, więc podziel pakiety, aby uniknąć takiej sytuacji.

Houssein Djirdeh
Jeff Posnick

Metoda React.lazy ułatwia dzielenie kodu aplikacji React na poziomie komponentów za pomocą importów dynamicznych.

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

Dlaczego ta funkcja jest przydatna?

Duża aplikacja React zwykle składa się z wielu komponentów, metod narzędziowych i bibliotek innych firm. Jeśli nie podejmiesz wysiłku, aby wczytywać różne części aplikacji tylko wtedy, gdy są potrzebne, do użytkowników zostanie wysłany jeden duży pakiet JavaScriptu, gdy tylko załadują pierwszą stronę. Może to znacząco wpłynąć na wydajność strony.

Funkcja React.lazy zapewnia wbudowany sposób na rozdzielenie komponentów w aplikacji na osobne fragmenty kodu JavaScript przy minimalnym nakładzie pracy. Następnie możesz zadbać o stany ładowania, łącząc go z komponentem Suspense.

Suspens

Problem z wysyłaniem do użytkowników dużych ładunków JavaScript polega na tym, że wczytywanie strony trwa długo, zwłaszcza na słabszych urządzeniach i przy wolniejszych połączeniach sieciowych. Dlatego dzielenie kodu i leniwe wczytywanie są niezwykle przydatne.

Zawsze jednak występuje niewielkie opóźnienie, z którym użytkownicy muszą się liczyć, gdy komponent podzielony na kod jest pobierany przez sieć. Dlatego ważne jest, aby wyświetlać przydatny stan ładowania. Używanie React.lazy z komponentem Suspense pomaga rozwiązać ten problem.

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

Komponent Suspense akceptuje komponent fallback, który umożliwia wyświetlanie dowolnego komponentu React jako stanu wczytywania. Poniższy przykład pokazuje, jak to działa. Awatar jest renderowany tylko wtedy, gdy użytkownik kliknie przycisk. Wtedy wysyłane jest żądanie pobrania kodu niezbędnego do zawieszonego AvatarComponent. W tym czasie wyświetlany jest komponent ładowania zastępczego.

W tym przypadku kod, który tworzy AvatarComponent, jest mały, dlatego spinner ładowania wyświetla się tylko przez krótki czas. Większe komponenty mogą się wczytywać znacznie dłużej, zwłaszcza przy słabym połączeniu sieciowym.

Aby lepiej pokazać, jak to działa:

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a następnie Pełny ekran pełny ekran.
  • Aby otworzyć Narzędzia dla programistów, naciśnij Ctrl+Shift+J (lub Command+Option+J na Macu).
  • Kliknij kartę Sieć.
  • Kliknij menu Ograniczanie, które domyślnie jest ustawione na Brak ograniczania. Wybierz Szybkie 3G.
  • W aplikacji kliknij przycisk Click Me (Kliknij mnie).

Wskaźnik wczytywania będzie teraz wyświetlany dłużej. Zwróć uwagę, że cały kod, który tworzy AvatarComponent, jest pobierany jako osobny fragment.