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.
- 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ą.
- 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:
- Utwórz niestandardową metodę sortowania zamiast importować bibliotekę firmy zewnętrznej
- Użyj wbudowanej metody
Array.prototype.sort()
, aby posortować dane liczbowe - Importuj metodę
sortBy
tylko z bibliotekilodash
, a nie z całej biblioteki - 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.