Pakiet internetowy łączy wszystkie zaimportowane pliki i pakuje je w co najmniej jeden plik wyjściowy nazywany pakietami. Łączenie przebiega sprawnie, ale w miarę rozrastania się aplikacji liczba pakietów będzie rosła. Musisz monitorować rozmiary pakietów, aby mieć pewność, że nie będą one zbyt duże i wpłyną na to, jak długo trwa wczytywanie aplikacji. Webpack umożliwia ustawianie budżetów wydajności na podstawie rozmiaru zasobów i może monitorować wielkość pakietów za Ciebie.
Aby zobaczyć, jak to działa, oto aplikacja, która odlicza dni do Nowego Roku. Została utworzona za pomocą React i moment.js. (Tak jak w przypadku rzeczywistych aplikacji, które coraz częściej korzystają z platform i bibliotek. 😉)
Zmierz odległość
Te ćwiczenia z programowania zawierają już aplikację w pakiecie z pakietem webpack.
- Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
- Kliknij Terminal (uwaga: jeśli nie widać przycisku terminala, może być konieczne użycie opcji pełnego ekranu).
- Aby uzyskać listę zasobów i ich rozmiarów oznaczonych kolorami, wpisz
webpack
w konsoli.
webpack
Pakiet główny jest wyróżniony na żółto, ponieważ jest większy niż 244 KiB (250 KB).
Te ostrzeżenia są domyślnie włączone w trybie produkcyjnym. Domyślny próg to 244 kiB bez kompresji zarówno w przypadku zasobów, jak i punktów wejścia (kombinacji wszystkich zasobów używanych podczas wstępnego wczytywania strony).
Webpack nie tylko Cię ostrzeże, ale podpowie, jak zmniejszyć rozmiar pakietów. Więcej informacji o zalecanych technikach znajdziesz w artykule Podstawy tworzenia witryn.
Ustaw niestandardowy budżet skuteczności
Odpowiedni budżet wydajności zależy od charakteru projektu. Najlepiej przeprowadzić badania na własną rękę. Dobrą zasadą jest przesłanie poniżej 170 KB skompresowanych lub zminimalizowanych zasobów ścieżki krytycznej.
W tej prostej wersji demonstracyjnej postaraj się jeszcze bardziej zachować umiar i ustaw budżet na 100 KB (97, 7 KiB). W webpack.config.js
dodaj:
module.exports = {
//...
performance: {
maxAssetSize: 100000,
maxEntrypointSize: 100000,
hints: "warning"
}
};
Nowy budżet wydajności jest ustawiany w bajtach:
- 100 000 bajtów w przypadku pojedynczych zasobów (maxAssetSize)
- 100 000 bajtów dla punktu wejścia (maxEntrypointSize)
W tym przypadku dostępny jest tylko 1 pakiet, który jest również punktem wyjścia.
Możliwe wartości wskazówek:
warning
(domyślnie): wyświetla żółte ostrzeżenie, ale kompilacja przechodzi pomyślnie. Najlepiej jest używać tej funkcji w środowiskach programistycznych.error
: wyświetla czerwony komunikat o błędzie, ale kompilacja nadal jest sprawdzana. To ustawienie jest zalecane w przypadku kompilacji produkcyjnych.false
: nie wyświetlają się ostrzeżenia ani błędy.
Optymalizuj
Budżet skuteczności ma Cię ostrzegać o problemach ze skutecznością, zanim staną się one zbyt trudne do rozwiązania. Zawsze istnieje więcej niż jeden sposób tworzenia aplikacji, a niektóre techniki mogą skrócić czas wczytywania. (Wiele z nich opisano w artykule Optymalizowanie JavaScriptu. 🤓)
Platformy i biblioteki ułatwiają życie programistów, ale użytkownicy nie zwracają uwagi na sposób tworzenia aplikacji – chodzi tylko o to, że są szybkie i funkcjonalne. Jeśli wydaje Ci się, że przekraczasz budżet skuteczności, nadszedł czas, aby pomyśleć o możliwych optymalizacji.
W prawdziwym świecie duże platformy po stronie klienta trudno jest wymienić na inne, dlatego należy używać ich z rozwagą. Po pogłębieniu poszukiwań możesz znaleźć mniejsze zamienniki popularnych bibliotek, które działają tak samo dobrze (dobra alternatywa dla moment.js to date-fns). Czasami lepiej nie korzystać z platformy ani z biblioteki, jeśli ma to znaczny wpływ na skuteczność.
Usunięcie nieużywanego kodu to dobry sposób na optymalizację aplikacji, które zawierają duże biblioteki innych firm. W przewodniku po usuwaniu nieużywanego kodu znajdziesz szczegółowe omówienie tego procesu. Oto szybki sposób na przeredagowanie kodu odliczania bez używania momentu.js.
W pliku app/components/Countdown.jsx usuń:
const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');
I usuń ten wiersz:
const moment = require('moment');
To wymaga trochę matematyki, ale możesz zastosować to samo odliczanie za pomocą waniliowego JavaScriptu:
const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));
Teraz usuń pakiet moment.js
z środowiska package.json
i ponownie uruchom pakiet internetowy w konsoli, aby utworzyć zoptymalizowany pakiet.
Gotowe! Udało Ci się zaoszczędzić 223 kiB (230 KB) i nie masz jeszcze budżetu na aplikację.🎉
Monitorowanie
Skonfigurowanie budżetu wydajności w pakiecie WWW wymaga tylko kilku linijek kodu i ostrzeże Cię, jeśli kiedykolwiek (przypadkowo) dodasz dużą zależność. Mówienie „z perspektywy co najmniej z oczu to z głowy”, ale pakiet internetowy może zagwarantować, że wiesz o wpływie na wydajność.