Jak przyspieszyć działanie aplikacji Next.js za pomocą podziału kodu i strategii inteligentnego wczytywania.
Czego się nauczysz?
W tym poście omówiliśmy różne typy kodu dzieląc dane i sposób korzystania z nich, aby przyspieszyć działanie aplikacji Next.js.
Dzielenie kodu na podstawie trasy i komponentu
Domyślnie Next.js dzieli kod JavaScript na osobne fragmenty dla każdej trasy. Gdy użytkownicy wczytują aplikację, Next.js wysyła tylko kod niezbędny dla parametru trasy początkowej. Podczas poruszania się po aplikacji użytkownicy pobierają fragmenty powiązane z innymi trasami. Dzielenie kodu na podstawie trasy minimalizuje liczbę skryptów do przeanalizowania i skompilowania jednocześnie, co daje szybszego wczytywania stron.
Chociaż dzielenie kodu na podstawie trasy jest dobrym ustawieniem domyślnym, możesz jeszcze bardziej zoptymalizować z podziałem kodu na poziomie komponentu. W przypadku dużych aplikacji, warto podzielić je na mniejsze fragmenty. Dzięki temu wszystkie duże komponenty, które nie są kluczowe lub są renderowane tylko na określonych interakcje użytkownika (np. kliknięcie przycisku) mogą być leniwe.
Next.js obsługuje dynamiczne import(),
który pozwala importować moduły JavaScript (w tym komponenty React).
dynamicznie i wczytywać każdy import jako oddzielny fragment. Dzięki temu
podziału kodu na poziomie komponentu
i umożliwia kontrolowanie wczytywania zasobów.
że użytkownicy pobierają potrzebny kod tylko w tej części witryny,
co oglądają. W Next.js komponenty te są renderowane po stronie serwera
(SSR)
domyślnie.
Importy dynamiczne w praktyce
Znajdziesz w nim kilka wersji przykładowej aplikacji składającej się z prostego z jednym przyciskiem. Po kliknięciu przycisku zobaczysz słodki szczeniaczek. Jako możesz sprawdzić, jak importowanie dynamiczne różni się od statycznego importy i jak współpracować z nimi.
W pierwszej wersji aplikacji szczeniaczek mieszka w: components/Puppy.js. Do
wyświetla szczeniaka na stronie, aplikacja zaimportuje komponent Puppy w
index.js za pomocą statycznej instrukcji importu:
import Puppy from "../components/Puppy";
Aby zobaczyć, jak Next.js tworzy pakiet aplikacji, sprawdź ślad sieciowy w Narzędziach deweloperskich:
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
Kliknij kartę Sieć.
Zaznacz pole wyboru Wyłącz pamięć podręczną.
Odśwież stronę.
Po załadowaniu strony cały niezbędny kod, w tym Puppy.js
komponent jest w pakiecie w index.js:
Gdy naciśniesz przycisk Kliknij mnie, zostanie wysłana tylko prośba o plik JPEG dla szczeniaka dodano do karty Network (Sieć):
Wadą tego rozwiązania jest to, że nawet jeśli użytkownicy nie klikają przycisku,
na jego widok, muszą załadować komponent Puppy, ponieważ jest on
index.js W tym przykładzie to nie jest szkoda, ale w praktyce.
dla aplikacji często znacznie łatwiej jest ładować duże komponenty tylko wtedy,
niezbędną.
Przyjrzyjmy się teraz drugiej wersji aplikacji, w której importowany statyczny
zastąpiono importem dynamicznym. Next.js zawiera kod next/dynamic, dzięki czemu
jest możliwe użycie dynamicznych importów dla dowolnych komponentów w Next:
import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";
// ...
const Puppy = dynamic(import("../components/Puppy"));
Wykonaj czynności z pierwszego przykładu, aby zbadać śledzenie sieci.
Przy pierwszym wczytaniu aplikacji pobierany jest tylko index.js. Tym razem
O 0,5 KB (zmniejszono go z 37,9 KB do 37,4 KB), ponieważ
nie zawiera kodu komponentu Puppy:
Komponent Puppy jest teraz w osobnym fragmencie 1.js, który jest ładowany tylko
po naciśnięciu przycisku:
W prawdziwych zastosowaniach komponenty są często bardzo często większe i leniwe ładowanie. umożliwia skrócenie początkowego ładunku JavaScript o setki kilobajtów.
Importy dynamiczne z niestandardowym wskaźnikiem wczytywania
W przypadku leniwego ładowania zasobów warto podać wskaźnik ładowania
na wypadek opóźnień. W Next.js możesz to zrobić, dodając tag
dodatkowy argument do funkcji dynamic():
const Puppy = dynamic(() => import("../components/Puppy"), {
loading: () => <p>Loading...</p>
});
Aby zobaczyć działanie wskaźnika wczytywania, symuluj wolne połączenie sieciowe w Narzędzia deweloperskie:
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
Kliknij kartę Sieć.
Zaznacz pole wyboru Wyłącz pamięć podręczną.
Na liście Throttling (Throttling) wybierz Fast 3G (Szybkie 3G).
Kliknij przycisk Kliknij mnie.
Teraz, gdy klikniesz przycisk, załadowanie komponentu i aplikacji może trochę potrwać. wyświetla się komunikat „Wczytuję...” .
Importy dynamiczne bez SSR
Jeśli chcesz renderować komponent tylko po stronie klienta (np. czat
widżet), możesz to zrobić, ustawiając opcję ssr na false:
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});
Podsumowanie
Dzięki obsłudze importu dynamicznego Next.js udostępnia kod na poziomie komponentu podział, który może zminimalizować ładunki JavaScript i ulepszyć aplikację czas wczytywania strony. Wszystkie komponenty są domyślnie renderowane po stronie serwera. Możesz wyłącz tę opcję w razie potrzeby.