Ogranicz ładunki JavaScript dzięki podziałowi kodu

Houssein Djirdeh

Większość stron internetowych i aplikacji składa się z wielu różnych części. Zamiast wysyła cały kod JavaScript z aplikacji, gdy tylko pierwszy wczyta się strona, przez co JavaScript jest dzielony na kilka fragmentów poprawia wydajność strony.

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak dzielić kod, aby poprawić wydajność prostej aplikacji sortującej 3 liczby.

Zmierz odległość

Pamiętaj, aby najpierw zmierzyć skuteczność strony, nie próbuje wprowadzić żadnych optymalizacji.

1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
3. Kliknij kartę Sieć.
4. Zaznacz pole wyboru Wyłącz pamięć podręczną.
5. Załaduj ponownie aplikację.

pliku JavaScript o wielkości 71,2 KB, aby posortować kilka liczb w prostej aplikacji. Dlaczego?

W kodzie źródłowym (src/index.js) importowana i używana jest biblioteka lodash w tej aplikacji. Język Lodash jest bardzo przydatny funkcji, ale używana jest tylko jedna metoda z pakietu. Instalowanie i importowanie całych zależności zewnętrznych, gdy tylko niewielkie jest często wykorzystywana.

Optymalizuj

Rozmiar pakietu można skrócić na kilka sposobów:

1. Utwórz niestandardową metodę sortowania zamiast importować bibliotekę firmy zewnętrznej
2. Użyj wbudowanej metody Array.prototype.sort(), aby posortować dane liczbowe
3. Importuj metodę sortBy tylko z biblioteki lodash, a nie z całej biblioteki
4. Pobierz kod do sortowania tylko wtedy, gdy użytkownik kliknie przycisk

1 i 2 to sposób na zmniejszenie rozmiaru pakietu (oraz w prawdziwych zastosowaniach). Są to jednak nie są używane w tym samouczku tylko ze względu na nauczanie 😈.

Obie opcje 3 i 4 pomagają zwiększyć wydajność aplikacji. Omówimy te kroki w kilku kolejnych sekcjach tego ćwiczenia z programowania. Jak w przypadku każdego kodowania samouczka, zawsze staraj się napisać kod samodzielnie, zamiast go kopiować i wklejać.

Importuj tylko to, czego potrzebujesz

Kilka plików trzeba zmodyfikować, aby można było zaimportować z usługi lodash tylko jedną metodę. Aby rozpocząć od, zastąp tę zależność w package.json:

"lodash": "^4.7.0",

tym:

"lodash.sortby": "^4.7.0",

Teraz w aplikacji src/index.js zaimportuj ten konkretny moduł:

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

Zaktualizuj też sposób sortowania wartości:

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

Załaduj ponownie aplikację, otwórz Narzędzia deweloperskie i przyjrzyj się panelowi Sieć. jeszcze raz.

W przypadku tej aplikacji rozmiar pakietu został zmniejszony ponad 4-krotnie przy niewielkim stopniu ale mamy jeszcze więcej do zrobienia.

Dzielenie kodu

webpack to jeden z najpopularniejszych używanych obecnie do tworzenia pakietów. W skrócie: łączy on wszystkie moduły JavaScript (jako jak również inne zasoby) tworzące aplikację internetową w pliki statyczne, musi zostać odczytana przez przeglądarkę.

Jeden pakiet używany w tej aplikacji można podzielić na 2 oddzielne fragmenty:

• Osoba odpowiedzialna za kod tworzący początkową trasę
• Dodatkowy fragment zawierający kod sortowniczy.

Za pomocą importów dynamicznych fragment dodatkowy można ładować leniwie. wczytywane na żądanie. W tej aplikacji kod, z którego tworzy się fragment, może być ładowane tylko po naciśnięciu przez użytkownika przycisku.

Najpierw usuń import najwyższego poziomu dla metody sortowania w src/index.js:

import sortBy from "lodash.sortby";

Zaimportuj go w detektorze zdarzeń, który uruchamia się po naciśnięciu przycisku:

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Funkcja import() jest częścią propozycja (obecnie na etapie opracowywania) 3. procedury TC39), aby uwzględnić możliwość dynamicznego importowania modułu. Webpack już obsługuje tę funkcję i ma taką samą składnię. na temat oferty pakietowej.

Funkcja import() zwraca obietnicę, a po jej zakończeniu zwraca wybraną jest dostępny, który jest podzielony na części. Po zakończeniu modułu zwracana jest wartość module.default, która służy do odwoływania się do wartości domyślnej eksport udostępniany przez lodash. Obietnica jest połączona z innym elementem .then, który wywołuje metodę sortInput w celu sortowania 3 wartości wejściowych. Na koniec łańcuch obietnic, .Pole catch() jest używane do obsługi zgłoszeń, w których obietnica zostanie odrzucona z powodu błędu.

Ostatnią rzeczą, jaką musisz zrobić, jest zapisanie metody sortInput w na końcu pliku. Musi to być funkcja, która zwraca funkcję, która pobiera metodę zaimportowaną z: lodash.sortBy. Funkcja zagnieżdżona może posortować te 3 wartości wejściowe i zaktualizować DOM.

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

Monitorowanie

Ponownie uruchom ponownie aplikację i obserwuj uważnie Sieć. z panelu ponownie. Zaraz po aplikacji jest pobierany tylko niewielki początkowy pakiet. .

Po naciśnięciu przycisku rozpocznie się posortowanie danych wejściowych, a fragment zawierający kod sortowniczy jest pobierany i wykonywany.

Zwróć uwagę, że liczby nadal są sortowane.

Podsumowanie

Dzielenie kodu i leniwe ładowanie mogą być bardzo przydatnymi technikami ograniczania czasu początkowego rozmiaru pakietu aplikacji, co może bezpośrednio skutkować znacznie szybsze wczytywanie stron. Istnieją jednak pewne ważne kwestie, które wymagają które należy uwzględnić przed uwzględnieniem optymalizacji w aplikacji.

Interfejs leniwego ładowania

Przy leniwym ładowaniu określonych modułów kodu trzeba zastanowić się, dla użytkowników ze słabszymi połączeniami sieciowymi. Podział wczytywanie bardzo dużego fragmentu kodu, gdy użytkownik przesyła wygląda na to, że aplikacja przestała działać, więc rozważ wskaźnik wczytywania.

Leniwe ładowanie modułów węzłów innych firm

Leniwe ładowanie zależności zewnętrznych w Twojej aplikacji nie zawsze jest najlepszym sposobem i zależy to od tego, gdzie ich używasz. Zwykle firma zewnętrzna zależności są rozdzielane na oddzielny pakiet vendor, który może być buforowany nie są aktualizowane tak często. Dowiedz się więcej o tym, jak SplitChunksPlugin może jak to zrobić.

Leniwe ładowanie z użyciem platformy JavaScript

Wiele popularnych platform i bibliotek, które korzystają z pakietu Webpack, zapewnia abstrakcje ułatwiają leniwe ładowanie niż importowanie dynamiczne aplikacji.

• Leniwe ładowanie modułów w Angular
• Dzielenie kodu za pomocą routera React Router
• Leniwe ładowanie w Vue Router

Import dynamiczny jest przydatny, ale pamiętaj, by zawsze używać funkcji zalecaną przez Twoją platformę lub bibliotekę do leniwego ładowania konkretnych modułów.

Wstępne wczytywanie i pobieranie z wyprzedzeniem

W miarę możliwości korzystaj ze wskazówek dotyczących przeglądarki, takich jak <link rel="preload"> lub <link rel="prefetch">, aby spróbować załadować moduły kluczowe nawet szybciej. Webpack obsługuje obie wskazówki dzięki użyciu magicznych komentarzy podczas importowania wyciągów. Zostało to wyjaśnione bardziej szczegółowo w Przewodnik wstępnego wczytywania kluczowych fragmentów.

Leniwe ładowanie więcej niż kodu

Obrazy mogą stanowić znaczną część aplikacji. Leniwe ładowanie tych, które znajdują się w części strony widocznej po przewinięciu lub poza widocznym obszarem urządzenia, mogą przyspieszyć działanie strony. Odczytano więcej na ten temat znajdziesz w Przewodnik po Lazysizes.