Ustawianie budżetów wydajności za pomocą pakietu internetowego

Milica Mihajlija

Webpack łączy wszystkie zaimportowane pliki i pakuje je w jeden lub więcej plików wyjściowych zwanych pakietami. Pakiety są przydatne, ale wraz z rozwojem aplikacji będą się powiększać. Musisz monitorować rozmiary pakietów, aby mieć pewność, że nie rosną zbyt szybko i nie wpływają na czas wczytywania aplikacji. Webpack obsługuje ustawianie budżetów wydajności na podstawie rozmiaru zasobów i może monitorować rozmiary pakietów.

Aby zobaczyć, jak to działa, oto aplikacja, która odlicza dni do Nowego Roku. Jest on oparty na React i moment.js. (Podobnie jak aplikacje w rzeczywistym świecie, które w coraz większym stopniu korzystają z frameworków i bibliotek. 😉)

Pomiary

Te warsztaty zawierają już aplikację spakowaną za pomocą webpacka.

1. Kliknij Remiksuj, aby edytować, aby umożliwić edycję projektu.
2. Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, może być konieczne użycie opcji Pełny ekran).
3. Aby uzyskać listę komponentów i ich rozmiarów z oznaczeniami kolorystycznymi, wpisz w konsoli webpack.

webpack

Główny pakiet jest podświetlony na żółto, ponieważ jest większy niż 244 KiB (250 KB).

Te ostrzeżenia są domyślnie włączone w trybie produkcyjnym, a domyślny próg to 244 KiB nieskompresowanych danych w przypadku zasobów i punktów wejścia (kombinacji wszystkich zasobów używanych podczas początkowego wczytywania strony).

Webpack nie tylko Cię ostrzeże, ale też podpowie, jak zmniejszyć rozmiar pakietów. Więcej informacji o zalecanych technikach znajdziesz w artykule Podstawy internetu.

Ustawianie niestandardowego budżetu na skuteczność

Odpowiedni budżet wydajności zależy od charakteru projektu. Zawsze warto przeprowadzić własne badania. Dobrym rozwiązaniem jest dostarczanie zasobów ścieżki krytycznej o rozmiarze poniżej 170 KB po skompresowaniu lub zminimalizowaniu.

W przypadku tej prostej wersji demonstracyjnej spróbuj być jeszcze bardziej ostrożny i ustaw budżet na 100 KB (97, 7 KiB). W sekcji webpack.config.js dodaj te informacje:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

Nowy budżet skuteczności jest ustawiany w bajtach:

• 100 000 bajtów w przypadku poszczególnych komponentów (maxAssetSize)
• 100 000 bajtów w przypadku punktu wejścia (maxEntrypointSize)

W tym przypadku jest tylko 1 pakiet, który jest też punktem wejścia.

Możliwe wartości parametru hints to:

1. warning (domyślny): wyświetla żółty komunikat ostrzegawczy, ale kompilacja przechodzi. Najlepiej używać go w środowiskach programistycznych.
2. error: wyświetla czerwony komunikat o błędzie, ale kompilacja nadal jest prawidłowa. To ustawienie jest zalecane w przypadku kompilacji produkcyjnych.
3. false: nie są wyświetlane żadne ostrzeżenia ani błędy.

Optymalizuj

Budżet wydajności ma na celu ostrzeganie o problemach z wydajnością, zanim staną się zbyt trudne do rozwiązania. Aplikację można zbudować na wiele sposobów, a niektóre techniki pozwalają skrócić czas ładowania. (Wiele z nich zostało opisanych w artykule Optymalizowanie JavaScriptu. 🤓)

Frameworki i biblioteki ułatwiają pracę deweloperom, ale użytkownicy nie zwracają uwagi na to, jak aplikacje są tworzone. Zależy im tylko na tym, aby były funkcjonalne i szybkie. Jeśli zauważysz, że przekraczasz budżet na skuteczność, czas pomyśleć o możliwych optymalizacjach.

W świecie rzeczywistym duże frameworki po stronie klienta są zwykle trudne do zastąpienia, dlatego ważne jest, aby używać ich z rozsądkiem. Po krótkim researchu często można znaleźć mniejsze odpowiedniki popularnych bibliotek, które działają równie dobrze (date-fns to dobra alternatywa dla moment.js). Czasami, jeśli framework lub biblioteka mają znaczący wpływ na wydajność, lepiej z nich w ogóle nie korzystać.

Usuwanie nieużywanego kodu to dobry sposób na optymalizację aplikacji, które zawierają duże biblioteki innych firm. W przewodniku usuwania nieużywanego kodu znajdziesz szczegółowe wyjaśnienie tego procesu. Poniżej przedstawiamy szybki sposób na przepisanie kodu odliczania bez użycia biblioteki moment.js.

W pliku app/components/Countdown.jsx usuń:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

Usuń ten wiersz:

const moment = require('moment');

Wymaga to trochę obliczeń, ale możesz zaimplementować to samo odliczanie za pomocą zwykłego 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ń moment.js z package.json i ponownie uruchom webpack w konsoli, aby utworzyć zoptymalizowany pakiet.

Ta-da! Zmniejszyliśmy rozmiar o 223 KiB (230 KB), a aplikacja mieści się w limicie.🎉

Monitoruj

Skonfigurowanie budżetu wydajności w webpacku wymaga tylko kilku linijek kodu. Będzie on ostrzegać, jeśli (przypadkowo) dodasz dużą zależność. Mówi się, że „co z oczu, to z serca”, ale webpack może sprawić, że zawsze będziesz mieć świadomość wpływu na wydajność.