Używaj React.lazy z pewnością: Bezpieczny sposób ładowania komponentów przy szybkim iterowaniu

Dylemat#

Obecnie rozwój oprogramowania przyspiesza w ramach popularnej filozofii "działaj szybko i psuj rzeczy". Nie oceniamy tu - to po prostu taki jest sposób działania. Jednak to szybkie tempo może czasami prowadzić do problemów, zwłaszcza kiedy chodzi o ładowanie komponentów w React.

Jeśli pracujesz nad projektem, który używa React.lazy do ładowania komponentów na żądanie, mogłeś napotkać problemy, takie jak ChunkLoadError i Loading chunk failed. Oto kilka możliwych przyczyn:

• Wystąpił problem z siecią, na przykład użytkownik ma wolne lub niestabilne połączenie internetowe.
• Użytkownik korzysta ze starej wersji aplikacji i przeglądarka próbuje załadować fragment, który już nie istnieje.

Zazwyczaj prosty odświeżenie strony może rozwiązać problem, ale to nie jest dobre doświadczenie dla użytkownika. Wyobraź sobie, że pojawia się biały ekran, gdy użytkownik próbuje przejść do innej trasy - to nie wygląda dobrze dla Twojej aplikacji.

Czy możemy zrównoważyć potrzebę szybkości z potrzebą płynnego doświadczenia użytkownika? Oczywiście. Pokażę Ci, jak to zrobić (oczywiście przy użyciu TypeScript).

Rozwiązanie#

Brutalnym rozwiązaniem może być przechowanie wszystkich wersji fragmentów na serwerze, eliminując tym samym problem "brakującego fragmentu". Jednak wraz ze wzrostem aplikacji to rozwiązanie może stać się niewykonalne ze względu na rosnące zapotrzebowanie na przestrzeń dyskową i nadal nie rozwiązuje problemu z siecią.

Biorąc pod uwagę, że próba ponownego załadowania strony może rozwiązać problem, możemy wdrożyć te rozwiązania w naszym kodzie. Ponieważ problem zwykle pojawia się, gdy użytkownik nawigujący do innej trasy, możemy rozwiązać to, nawet bez wiedzy użytkownika. Wszystko, co musimy zrobić, to stworzyć opakowanie wokół funkcji React.lazy, które obsłuży próby i odświeżenia.

Istnieje już kilka świetnych artykułów na temat implementacji tego rodzaju rozwiązania, dlatego skupię się na idei i mechanizmach wewnętrznych rozwiązania.

Tworzenie opakowania#

Pierwszym krokiem jest stworzenie opakowania wokół funkcji React.lazy:

Obsługa ponownych prób#

W przypadku problemów z siecią możemy obsłużyć ponowne próby, opakowując importFunction w funkcję tryImport:

Wygląda prosto, prawda? Możesz również zaimplementować algorytm exponential backoff, aby efektywniej obsłużyć ponowne próby.

Obsługa odświeżeń#

W przypadku problemu ze starą wersją możemy obsłużyć odświeżenia przez wychwycenie błędu i odświeżenie strony:

Jednak taka implementacja jest bardzo niebezpieczna, ponieważ może powodować nieskończoną pętlę odświeżeń, gdy błąd nie może zostać rozwiązany przez odświeżenie. W międzyczasie stan aplikacji zostanie utracony podczas odświeżenia. Potrzebujemy więc pomocy od sessionStorage, aby zapisać wiadomość, że próbowaliśmy odświeżyć stronę:

Teraz, kiedy wychwycimy błąd z funkcji safeLazy, wiemy, że jest to coś, czego nie można rozwiązać przez odświeżenie.

Wiele leniwych komponentów na tej samej stronie#

Istnieje jeszcze ukryta pułapka w obecnej implementacji. Jeśli masz wiele leniwych komponentów na tej samej stronie, nieskończona pętla odświeżeń może nadal się wydarzyć, ponieważ inne komponenty mogą zresetować wartość sessionStorage. Aby rozwiązać ten problem, możemy użyć unikalnego klucza dla każdego komponentu:

Teraz każdy komponent będzie miał swój własny klucz sessionStorage, a nieskończona pętla odświeżeń zostanie uniknięta. Możemy kontynuować dopracowywanie rozwiązania, na przykład:

• Zbieranie wszystkich kluczy w tablicy, dzięki czemu potrzebny jest tylko jeden klucz w pamięci.
• Ustawienie limitu odświeżeń, aby odświeżyć stronę więcej niż jeden raz przed wydaniem błędu.

Ale myślę, że rozumiesz ideę. Kompletne rozwiązanie w TypeScript z testami i konfiguracjami jest dostępne w repozytorium GitHub. Opublikowałem również pakiet react-safe-lazy na NPM, więc możesz go użyć w swoim projekcie od razu.

Wnioski#

Tworzenie oprogramowania to delikatna praca, a nawet najmniejsze szczegóły mogą wymagać wysiłku do rozwiązania. Mam nadzieję, że ten artykuł pomoże Ci elegancko poradzić sobie z problemami z React.lazy i poprawić doświadczenie użytkownika Twojej aplikacji.