Czy Twoja aplikacja React jest zbyt wolna lub ładuje się zbyt długo? Jeśli tak, możesz chcieć użyć techniki znanej jako dzielenie kodu. Ta technika jest bardzo skuteczna w poprawie szybkości ładowania i wydajności aplikacji React. Ale czym jest dzielenie kodu? A jak to się robi?

Co to jest dzielenie kodu?

Typowa aplikacja React składa się z dziesiątek komponentów (i kodu). Ale nie musisz ładować większości tych komponentów, kiedy ładujesz je po raz pierwszy. Podział kodu polega na podzieleniu różnych części aplikacji i ładowaniu ich tylko wtedy, gdy jest to potrzebne. Jest to o wiele bardziej wydajne niż ładowanie całej aplikacji na raz.

Rozważmy aplikację React, która ma trzy strony: stronę główną, stronę informacji i stronę produktów. Gdy jesteś na stronie głównej, nie ma sensu wczytywać strony o produkcie ani strony produktów. Ponieważ tak naprawdę nie jesteś jeszcze na tych stronach. Ideą dzielenia kodu jest upewnienie się, że ładujesz kod tylko wtedy, gdy jest potrzebny.

Otwórz stronę internetową w przeglądarce internetowej, a następnie otwórz DevTools (możesz kliknąć F12 na klawiaturze, aby otworzyć ją w Google Chrome). Następnie przejdź do zakładki Źródło. Znajdziesz tam cały kod, który jest pobierany podczas przechodzenia do strony. Bez dzielenia kodu przeglądarka pobiera wszystkie pliki w Twoim projekcie podczas pierwszego ładowania strony. Może to spowolnić Twoją witrynę, jeśli zawiera ona dużo plików.

Dzielenie kodu staje się szczególnie przydatne, gdy projekt zaczyna się rozrastać. Dzieje się tak, ponieważ pobieranie całych plików aplikacji na raz może zająć bardzo dużo czasu. Więc podział tego będzie całkiem korzystny.

Najlepsze w dzieleniu kodu jest to, że można opóźnić ładowanie komponentów i funkcji. Nasz przewodnik wprowadzający do ReactJS szczegółowo wyjaśnia komponenty i funkcje na wypadek, gdybyś potrzebował odświeżenia.

Funkcje podziału kodu: Korzystanie z importu dynamicznego

Rozważ następującą sytuację. Chcesz, aby Twoja strona główna miała przycisk. Po kliknięciu przycisku chcesz zaalarmować sumę 2 i 2 (czyli 4). Więc tworzysz Strona główna.js komponent i zdefiniuj widok swojej strony głównej.

W tym przypadku masz dwie możliwości. Najpierw możesz zaimportować kod do dodawania liczb u góry Strona główna.js plik. Ale tutaj jest problem. Jeśli chcesz zaimportować funkcję na górze pliku, kod zostanie załadowany nawet wtedy, gdy nie klikniesz przycisku. Lepszym podejściem będzie załadowanie pliku suma() działać tylko po kliknięciu przycisku.

Aby to osiągnąć, musisz wykonać import dynamiczny. Oznacza to, że zaimportujesz plik suma() funkcja inline w elemencie przycisku. Oto kod dla tego samego:

eksportdomyślnyfunkcjonowaćDom() { 
powrót ( 
"Dom"> 
Strona główna</h1>
 {
import("../sum.js").Następnie((moduł) => {
 alarm(moduł.suma(2, 2))
 })
 }}
 >
 Zsumuj obie liczby
 </button> 
 </div> 
 ); 
}

Teraz przeglądarka pobierze tylko plik suma.js moduł po kliknięciu przycisku. Poprawia to czas ładowania strony głównej.

Komponenty do dzielenia kodu: korzystanie z React.lazy i Suspense

Możesz dzielić komponenty w React za pomocą leniwy() funkcjonować. Najlepszym miejscem do przeprowadzenia dzielenia kodu jest router. Ponieważ to tutaj odwzorowujesz komponenty na trasy w swojej aplikacji. Możesz przeczytać nasz przewodnik na jak zbudować aplikację jednostronicową za pomocą React Router jeśli potrzebujesz odświeżenia.

Załóżmy, że Twoja aplikacja ma plik Dom, O, I Produkty część. Kiedy jesteś na Dom komponent, nie ma sensu ładować pliku O składnik lub Produkty część. Musisz więc oddzielić je od Dom trasa. Poniższy kod pokazuje, jak to osiągnąć:

Najpierw musisz zaimportować wymagane funkcje i komponenty z pliku reagować I reaguj-router-dom moduły:

import { Trasy, trasa, wylot, połączenie } z„React-router-dom”;
import { leniwy, suspens } z"reagować";

Następnie musisz dynamicznie zaimportować komponenty za pomocą pliku leniwy() funkcjonować:

konst Dom = leniwy (() =>import(„./komponenty/Strona główna”));
konst O = leniwy (() =>import(„./komponenty/Informacje”));
konst Produkty = leniwy (() =>import(„./komponenty/Produkty”));

Następnie skonfiguruj układ (menu nawigacyjne). Użyj komponent do renderowania komponentu odpowiadającego bieżącej trasie (Dom, O, Lub Produkty część):

funkcjonowaćNavWrapper() {
powrót (
 <>

Widać, że zawijamy komponenty do środka. To mówi Reactowi, że wszystko w środku może być ładowany leniwie, co oznacza, że ​​może nie być dostępny od razu. Z tego powodu, Niepewność składnik ma awaria nieruchomość. W naszym przypadku wartością jest prosty tekst „Ładowanie…”. Tak więc podczas pobierania każdej ze stron na ekranie pojawi się komunikat ładowanie.

Na koniec ustaw trasę:

eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (

"/" element={}>
"/" element={} />
"/produkty" element={} />
"/o" element={} />
 </Route>
 </Routes>
 );
}

Teraz, gdy odwiedzasz stronę główną, przeglądarka ładuje tylko plik Strona główna.js plik. W ten sam sposób, kiedy klikniesz na O link w menu nawigacyjnym, aby odwiedzić stronę Informacje, przeglądarka ładuje tylko Informacje o.js plik. To samo dotyczy strony Produkty.

Warunkowe dzielenie kodu

Często na Twojej stronie mogą znajdować się treści, które dotyczą tylko niektórych użytkowników. Na przykład na swojej stronie głównej możesz mieć sekcję z danymi administratora, która jest dostępna wyłącznie dla administratorów. Może to być pulpit administratora, który jest widoczny dla administratorów, ale nie dla zwykłych użytkowników.

W takim przypadku nie chciałbyś wyświetlać wszystkich tych danych za każdym razem. W takim przypadku możesz użyć techniki dzielenia kodu, aby mieć pewność, że informacje te będą wyświetlane tylko wtedy, gdy ta osoba jest administratorem.

Oto jak wyglądałby ten kod:

import { leniwy, suspens } z"reagować";
konst AdminData = leniwy (() =>import("./AdminData"));
eksportdomyślnyfunkcjonowaćDom() { 
konst [isAdmin, setIsAdmin] = useState(FAŁSZ)
powrót ( 

"Dom"> 
Strona główna</h1>
 setIsAdmin(poprzedni => !prev)}>
 Przełącz administratora
 </button> 

Ładowanie...</h1>}>
 {jestAdminem? <Dane administratora />: <h2> Nie administrator h2>} 
 </Suspense>
 </div> 
 ); 
}

Teraz, gdy klikniesz przycisk przełączania, jestAdminem zostanie ustawiony na PRAWDA. W rezultacie aplikacja wyświetli plik to jest leniwie ładowane. Ale jeśli nie jesteś administratorem, aplikacja nigdy się nie pobierze AdminData.js bo to nie będzie potrzebne.

Warunkowe dzielenie kodu wykorzystuje tę samą koncepcję co renderowanie warunkowe w React.

Zaawansowane koncepcje dzielenia kodu

Jedną z zaawansowanych technik, które można włączyć podczas dzielenia kodu, są przejścia. The useTransition() hook umożliwia wykonywanie niepilnych aktualizacji, które nie zmienią interfejsu użytkownika, dopóki nie zakończą aktualizacji.

Najpierw importujesz hak:

import {useTransition} z"reagować"

Następnie wywołujesz hak, który powraca Oczekuje I startPrzejście:

konst [isPending, startTransition] = useTransition()

Na koniec zawiń kod do aktualizacji stanu w środku startTransition():

startTransition(() => {
 setIsAdmin((poprzedni) => !poprzednia)
})

Teraz twój rzeczywisty interfejs użytkownika nie będzie wyświetlał wartości zastępczej (tekst ładowania), dopóki przeglądarka nie zakończy przejścia. Oznacza to, że będzie czekać, aż przeglądarka pobierze wszystkie dane administratora, zanim w ogóle spróbuje wyświetlić jakiekolwiek dane.

Inne sposoby optymalizacji wydajności reakcji

W tym artykule omówiono dzielenie kodu jako metodę poprawy wydajności aplikacji React. Ale istnieje również kilka innych metod, które mogą zapewnić wymaganą wiedzę do tworzenia solidnych aplikacji.