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

Milica Mihajlija

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. 😉)

Aplikacja zliczająca dni pozostałe do Nowego Roku

Zmierz odległość

Te ćwiczenia z programowania zawierają już aplikację w pakiecie z pakietem webpack.

  1. Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
  2. Kliknij Terminal (uwaga: jeśli nie widać przycisku terminala, może być konieczne użycie opcji pełnego ekranu).
  3. 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).

Dane wyjściowe pakietu internetowego pokazujące rozmiar pakietu wynoszący 323 KiB
Pakiet internetowy ostrzega Cię o dużym pakiecie JS ⚠️

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).

Ostrzeżenie w pakiecie internetowym, że zasób przekracza zalecany limit rozmiaru
Pakiet internetowy ostrzega o dużym pakiecie JS ⚠️

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.

Rekomendacja dotycząca optymalizacji wydajności pakietu internetowego
Rekomendacja dotycząca optymalizacji wydajności pakietu internetowego 💁

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:

  1. warning (domyślnie): wyświetla żółte ostrzeżenie, ale kompilacja przechodzi pomyślnie. Najlepiej jest używać tej funkcji w środowiskach programistycznych.
  2. error: wyświetla czerwony komunikat o błędzie, ale kompilacja nadal jest sprawdzana. To ustawienie jest zalecane w przypadku kompilacji produkcyjnych.
  3. false: nie wyświetlają się ostrzeżenia ani błędy.
Błąd wydajności pakietu internetowego wyróżniona czerwoną czcionką
Wskazówka dotycząca wydajności pakietu internetowego „error” 🚨

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ę.🎉

Rozmiar pakietu internetowego po optymalizacji to 97,7 KiB

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ść.