Nikt nie lubi czekać. Ponad 50% użytkowników porzuca witrynę, jeśli jej wczytywanie trwa dłużej niż 3 sekundy.
Wysyłanie dużych ładunków JavaScriptu znacząco wpływa na szybkość witryny. Zamiast wysyłać cały kod JavaScript do użytkownika od razu po wczytaniu pierwszej strony aplikacji, podziel pakiet na kilka części i wyślij tylko to, co niezbędne na początku.
Dlaczego dzielenie kodu jest korzystne?
Dzielenie kodu to technika mająca na celu zminimalizowanie czasu uruchamiania. Gdy dostarczamy mniej JavaScriptu na etapie uruchamiania, możemy przyspieszyć jego interaktywność, minimalizując w tym okresie obsługę wątków głównych.
W przypadku podstawowych wskaźników internetowych zmniejszenie ładunków JavaScript pobieranych podczas uruchamiania przyczyni się do poprawy czasów opóźnienia po pierwszej interakcji (FID) i interakcji z kolejnym wyrenderowaniem (INP). Uwalniając wątek główny, aplikacja może szybciej reagować na dane wejściowe użytkownika, ograniczając koszty analizowania, kompilowania i wykonywania JavaScriptu.
W zależności od architektury witryny – zwłaszcza jeśli witryna w dużym stopniu bazuje na renderowaniu po stronie klienta – zmniejszenie ładunków JavaScript odpowiedzialnych za renderowanie znaczników może poprawić czas trwania największego wyrenderowania treści (LCP). Może się tak zdarzyć, gdy zasób LCP jest opóźniony na wykrycie go przez przeglądarkę do momentu zakończenia znaczników po stronie klienta lub gdy wątek główny jest zbyt zajęty, aby wyrenderować ten element LCP. Oba scenariusze mogą opóźnić czas LCP strony.
Zmierz odległość
Jeśli wykonanie całego JavaScriptu na stronie zajęło dużo czasu, Lighthouse wyświetla błąd.
Podziel pakiet JavaScript w taki sposób, aby w momencie wczytywania aplikacji przez użytkownika wysyłał on tylko kod wymagany na trasie początkowej. Pozwala to zminimalizować ilość skryptu wymagającego analizy i skompilowania, a tym samym skrócić czas wczytywania strony.
Popularne programy do tworzenia pakietów modułów, takie jak webpack, Parcel i Rollup, umożliwiają dzielenie pakietów za pomocą importowania dynamicznego.
Zobaczmy na przykład ten fragment kodu, który pokazuje przykład metody someFunction, która jest uruchamiana podczas przesyłania formularza.
import moduleA from "library";
form.addEventListener("submit", e => {
e.preventDefault();
someFunction();
});
const someFunction = () => {
// uses moduleA
}
someFunction używa modułu zaimportowanego z konkretnej biblioteki. Jeśli moduł nie jest używany w innym miejscu, blok kodu można zmodyfikować tak, aby pobierał go z użyciem importu dynamicznego tylko wtedy, gdy formularz został przesłany przez użytkownika.
form.addEventListener("submit", e => {
e.preventDefault();
import('library.moduleA')
.then(module => module.default) // using the default export
.then(() => someFunction())
.catch(handleError());
});
const someFunction = () => {
// uses moduleA
}
Kod, który tworzy moduł, nie jest włączany do początkowego pakietu i jest teraz leniwy ładowany lub jest udostępniany użytkownikowi tylko wtedy, gdy jest potrzebny po przesłaniu formularza. Aby jeszcze bardziej zwiększyć wydajność strony, wczytuj wstępnie najważniejsze fragmenty, aby nadać im priorytet i szybciej pobrać.
Poprzedni fragment kodu jest prostym przykładem, ale leniwe ładowanie zależności od innych firm nie jest częstym wzorcem w większych aplikacjach. Zwykle zależności zewnętrzne są dzielone na oddzielny pakiet dostawców, który można zapisywać w pamięci podręcznej, ponieważ nie są aktualizowane tak często. Dowiedz się więcej o tym, jak może w tym pomóc SplitChunksPlugin.
Podział na poziomie trasy lub komponentu podczas korzystania z platformy po stronie klienta to prostszym sposobem na leniwe ładowanie różnych części aplikacji. Wiele popularnych platform korzystających z pakietów Webpack zawiera abstrakcje ułatwiające leniwe ładowanie niż zagłębianie się w konfiguracje samodzielnie.