Ogranicz ładunki JavaScript dzięki podziałowi kodu

Houssein Djirdeh

Jeremy Wagner

Nikt nie lubi czekać. Ponad 50% użytkowników porzuca stronę, jeśli wczytuje się ona dłużej niż 3 sekundy.

Wysyłanie dużych ładunków JavaScriptu wpływa na szybkość działania witryny znacznie obniżył się. Zamiast wysyłać cały kod JavaScriptu do użytkownika gdy zostanie wczytana pierwsza strona aplikacji, podziel pakiet na wielu elementów i na samym początku wysyłać tylko to, co konieczne.

Dlaczego dzielenie kodu jest korzystne?

Dzielenie kodu to technika mająca na celu zminimalizowanie czasu uruchamiania. Gdy wysyłamy mniej kodu JavaScript przy uruchamianiu, możemy szybciej interaktywnie działać w aplikacjach, ograniczając aktywność w wątku głównym w tym krytycznym okresie.

W przypadku podstawowych wskaźników internetowych zmniejszenie ładunków JavaScriptu pobieranych podczas uruchamiania przyczyni się do skrócenia czasu interakcji z kolejnym wyrenderowaniem (INP). Dzieje się tak, ponieważ po uwolnieniu głównego wątku aplikacja jest w stanie szybciej reagować na dane wejściowe użytkownika, ograniczając koszty przetwarzania, kompilowania i uruchamiania kodu JavaScript.

W zależności od architektury witryny – zwłaszcza jeśli witryna w dużym stopniu opiera się na renderowaniu po stronie klienta – zmniejszenie ładunków JavaScript odpowiedzialnych za renderowanie znaczników może poprawić największe wyrenderowanie treści (LCP). Może się tak zdarzyć, gdy zasób LCP jest opóźniony w wykryciu zasobu przez przeglądarkę do momentu zakończenia znaczników po stronie klienta lub gdy wątek główny jest zbyt zajęty, aby wyrenderować dany element LCP. Oba scenariusze mogą opóźnić czas LCP strony.

Zmierz odległość

Lighthouse wyświetla nieudaną kontrolę, gdy zajmuje dużo czasu wykonywania całego JavaScriptu na stronie.

Podziel pakiet JavaScript tak, aby wysyłać tylko kod niezbędny do początkowej trasy, gdy użytkownik wczytuje aplikację. Pozwala to zminimalizować liczbę skryptów są przeanalizowane i skompilowane, co skraca czas wczytywania strony.

popularne pakiety modułów, takie jak webpack, Parcel oraz Podsumowanie pozwala podzielić pakiety za pomocą importów dynamicznych. Weźmy na przykład ten fragment kodu, który przedstawia przykładową Metoda someFunction, która jest uruchamiana po przesłaniu formularza.

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

Tutaj someFunction używa modułu zaimportowanego z konkretnej biblioteki. Jeśli ten moduł nie jest używany gdzie indziej, blok kodu można zmodyfikować, tak aby dynamiczny import, aby pobrać go tylko wtedy, gdy formularz zostanie 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, z którego składa się moduł, nie jest dołączany do początkowego pakietu. i jest teraz leniwe ładowanie lub udostępniane użytkownikowi tylko wtedy, gdy jest to potrzebne po przesłanie formularza. Aby jeszcze bardziej zwiększyć wydajność strony, wczytuj z wyprzedzeniem najważniejsze fragmenty, aby szybciej je pobrać i nadać im priorytety.

Chociaż poprzedni fragment kodu to prosty przykład, leniwe ładowanie kodu zewnętrznego nie jest typowym wzorcem w większych aplikacjach. Zwykle zależności od stron są dzielone na oddzielny pakiet dostawców, który można przechowywać w pamięci podręcznej. nie są aktualizowane tak często. Więcej informacji o tym, jak SplitChunksPlugin może jak to zrobić.

Podział na poziomie trasy lub komponentu w przypadku korzystania ze platformy po stronie klienta jest łatwiejsza metoda leniwego ładowania różnych części aplikacji. Wiele popularne platformy korzystające z pakietu Webpack zapewniają abstrakcje zapewniające leniwe ładowanie jest łatwiejsze niż samodzielne wprowadzanie zmian w konfiguracjach.