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ą świetne, ale wraz z rozwojem aplikacji będą też rosnąć pakiety. Musisz sprawdzać rozmiary pakietów, aby nie były zbyt duże i nie wpływały na czas ładowania aplikacji. Webpack obsługuje ustawianie budżetów wydajności na podstawie rozmiaru zasobu i może monitorować rozmiary pakietów.

Aby zobaczyć, jak to działa, możesz skorzystać z aplikacji, która zlicza dni do Nowego Roku. Jest ona tworzona za pomocą React i moment.js. (Podobnie jak aplikacje, które coraz częściej korzystają z ramek i bibliotek. 😉)

Aplikacja zliczająca dni do Nowego Roku

Zmierz odległość

Ten projekt Codelab zawiera już aplikację w pakiecie z webpack.

  1. Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
  2. Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, być może trzeba będzie użyć opcji Pełny ekran).
  3. Aby uzyskać listę komponentów i ich rozmiarów z podziałem na kolory, wpisz webpack w konsoli.
webpack

Pakiet główny jest wyróżniony na żółto, ponieważ ma rozmiar większy niż 244 KiB (250 KB).

Dane wyjściowe webpacku pokazujące rozmiar pakietu wynoszący 323 KiB
Ostrzeżenie Webpacka o dużym pakiecie JS ⚠️

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

Ostrzeżenie Webpacka, że zasób przekracza zalecany limit rozmiaru
Ostrzeżenie Webpacka o dużym pakiecie JS ⚠️

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

Rekomendacja optymalizacji wydajności Webpack
Rekomendacja optymalizacji wydajności webpacka 💁

Ustawianie niestandardowego budżetu skuteczności

Odpowiednio dobrany budżet wydajności zależy od charakteru projektu. Zawsze warto przeprowadzić własne badania. Zasada: dostarczaj skompresowane lub zminimalizowane zasoby critical-path o rozmiarze poniżej 170 KB.

Na potrzeby tego prostego demonstracyjnego przykładu spróbuj zachować jeszcze większą ostrożność 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 skuteczności jest ustawiany w bajtach:

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

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

Możliwe wartości atrybutu hints to:

  1. warning (domyślnie): wyświetla żółty komunikat ostrzegawczy, ale kompilacja jest prawidłowa. Najlepiej używać go w środowiskach programistycznych.
  2. error: wyświetla czerwony komunikat o błędzie, ale kompilacja nadal przechodzi. To ustawienie jest zalecane w przypadku wersji produkcyjnych.
  3. false: nie wyświetlają się żadne ostrzeżenia ani błędy.
Błąd wydajności Webpacka w czerwonej czcionce
Wskazówka dotycząca wydajności Webpacka „błąd” 🚨

Optymalizuj

Budżet skuteczności ma na celu ostrzeganie Cię o problemach z wydajnością, zanim staną się one zbyt trudne do rozwiązania. Zawsze istnieje więcej niż 1 sposób tworzenia aplikacji, a niektóre techniki pozwolą skrócić czas wczytywania. (wiele z nich zostało opisanych w artykule Optymalizacja kodu JavaScript). 🤓)

Frameworki i biblioteki ułatwiają życie deweloperom, ale użytkownicy nie przejmują się tym, jak zbudowano aplikację, tylko tym, czy jest ona funkcjonalna i szybka. Jeśli zauważysz, że przekraczasz budżet skuteczności, zastanów się nad możliwymi optymalizacjami.

W praktyce duże frameworki po stronie klienta są zwykle trudne do wymiany, dlatego należy z nich korzystać rozważnie. Po przeprowadzeniu niewielkiego badania często można znaleźć mniejsze alternatywy dla popularnych bibliotek, które działają równie dobrze (date-fns to dobra alternatywa dla moment.js). Czasami lepiej jest w ogóle nie używać frameworka ani biblioteki, jeśli ma to znaczny wpływ na wydajność.

Usuwanie nieużywanego kodu to dobry sposób na optymalizację aplikacji, które zawierają duże biblioteki innych firm. Szczegóły tego procesu znajdziesz w przewodniku Usuwanie nieużywanego kodu. Poniżej znajdziesz szybki sposób przepisania kodu odliczania bez używania moment.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');

Wymaga to trochę matematyki, ale możesz zaimplementować ten sam 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! Udało Ci się zmniejszyć rozmiar o 223 KiB (230 KB) i aplikacja nie przekracza limitu.🎉

Po optymalizacji rozmiar pakietu webpacka wynosi 97,7 KiB

Monitorowanie

Konfiguracja budżetu wydajności w webpack wymaga tylko kilku linii kodu. Jeśli (przypadkowo) dodasz dużą zależność, otrzymasz o tym ostrzeżenie. Jak mówi przysłowie, „co z oczu, to z myśli”, ale webpack może zadbać o to, abyś zawsze wiedział(-a) o wpływie na wydajność.