Monitorowanie i analizowanie aplikacji

Za pomocą narzędzi do śledzenia i analizowania pakietu Webpack

Nawet jeśli skonfigurujesz pakiet internetowy tak, aby aplikacja była jak najmniejsza, musisz go śledzić i wiedzieć, co zawiera. W przeciwnym razie możesz zainstalować zależność, która spowoduje, że aplikacja 2 razy będzie większa – i nawet tego nie zauważy.

W tej sekcji opisujemy narzędzia, które ułatwiają zrozumienie pakietu.

Monitorowanie rozmiaru pakietu

Aby monitorować rozmiar aplikacji, podczas programowania korzystaj z panelu webpack-dashboard, a w CI – bundlesize.

panel-pakietu internetowego

Parametr webpack-dashboard wzbogaca dane wyjściowe pakietu internetowego o rozmiary zależności, postępu i innych szczegółów. Wygląda to tak:

Ten panel ułatwia śledzenie dużych zależności – jeśli je dodasz, natychmiast zobaczysz je w sekcji Moduły.

Aby włączyć tę funkcję, zainstaluj pakiet webpack-dashboard:

npm install webpack-dashboard --save-dev

Dodaj wtyczkę do sekcji plugins konfiguracji:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

lub compiler.apply(), jeśli korzystasz z serwera deweloperskiego opartego na szybkiej kopii:

compiler.apply(new DashboardPlugin());

Możesz śmiało korzystać z panelu, aby znaleźć miejsca, które warto poprawić. Możesz na przykład przejrzeć sekcję Moduły, aby znaleźć biblioteki, które są za duże i można je zastąpić mniejszymi odpowiednikami.

rozmiar pakietu

bundlesize sprawdza, czy zasoby pakietu internetowego nie przekraczają określonych rozmiarów. Zintegruj ją z CI, aby otrzymywać powiadomienia, gdy aplikacja stanie się za duża:

Aby je skonfigurować:

Więcej informacji o maksymalnych rozmiarach

1. Zoptymalizuj aplikację tak, aby była jak najmniejsza. uruchomić kompilację produkcyjną;

2. Dodaj sekcję bundlesize do package.json z tą treścią:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. Wykonaj polecenie bundlesize za pomocą polecenia npx:

   npx bundlesize
   

   Spowoduje to wydrukowanie rozmiaru każdego pliku w formacie gzip:

   PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
   PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
   PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
   PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
   

4. Dodaj po 10–20% do każdego rozmiaru, a uzyskasz maksymalne rozmiary. Marża 10-20% pozwoli Ci normalnie tworzyć aplikację i ostrzegać, gdy jej rozmiar za bardzo się zwiększy.

   Włącz bundlesize

5. Zainstaluj pakiet bundlesize jako zależność programistyczną:

   npm install bundlesize --save-dev
   

6. W sekcji bundlesize w tabeli package.json określ maksymalne rozmiary betonu. W przypadku niektórych plików (np. obrazów) warto określić maksymalny rozmiar na typ pliku, a nie dla każdego pliku:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*.png",
         "maxSize": "16 kB",
       },
       {
         "path": "./dist/main.*.js",
         "maxSize": "20 kB",
       },
       {
         "path": "./dist/vendor.*.js",
         "maxSize": "35 kB",
       }
     ]
   }   
   

7. Dodaj skrypt npm, aby uruchomić sprawdzanie:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. Skonfiguruj CI do wykonywania npm run check-size przy każdym przekazaniu push. (oraz zintegrować bundlesize z GitHubem, jeśli tworzysz na niej projekt).

To wszystko. Jeśli uruchomisz teraz npm run check-size lub wypchniesz kod, zobaczysz, czy pliki wyjściowe są wystarczająco małe:

W przypadku niepowodzenia:

Więcej informacji

• Alex Russell o rzeczywistym czasie wczytywania, na który powinniśmy kierować reklamy.

Przeanalizuj, dlaczego pakiet jest taki duży.

Możesz dokładniej przyjrzeć się pakietowi, aby zobaczyć, które moduły zajmują w nim miejsce. Poznaj narzędzie webpack-bundle-anlyzer, które:

webpack-bundle-analyzer skanuje pakiet i tworzy wizualizację jego zawartości. Użyj tej wizualizacji, aby znaleźć duże lub niepotrzebne zależności.

Aby korzystać z tego narzędzia, zainstaluj pakiet webpack-bundle-analyzer:

npm install webpack-bundle-analyzer --save-dev

dodaj wtyczkę do konfiguracji pakietu internetowego:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

i uruchomić kompilację produkcyjną. Wtyczka otworzy stronę statystyk w przeglądarce.

Domyślnie strona statystyk pokazuje rozmiar przeanalizowanych plików (tzn. liczbę plików widocznych w pakiecie). Warto porównać rozmiary plików gzip, ponieważ jest to lepsze rozwiązanie dla użytkowników. Aby je zmienić, użyj paska bocznego po lewej stronie.

Oto czego szukać w raporcie:

• Duże zależności. Dlaczego są tak duże? Czy istnieją mniejsze usługi alternatywne (np. Preact zamiast React). Czy używasz całego kodu, który zawiera (np. Moment.js zawiera wiele języków, które często nie są używane i można je pominąć)?
• Zduplikowane zależności. Widzisz tę samą bibliotekę w wielu plikach? (Użyj na przykład opcji optimization.splitChunks.chunks w pakiecie webpack 4 lub CommonsChunkPlugin w pakiecie internetowym 3, aby przenieść ją do wspólnego pliku). A może pakiet zawiera wiele wersji tej samej biblioteki?
• Podobne zależności. Czy są jakieś podobne biblioteki, które pełnią mniej więcej taką samą funkcję? (np. moment i date-fns lub lodash i lodash-es). Spróbuj korzystać z jednego narzędzia.

Zapoznaj się też ze świetną analizą pakietów pakietów internetowych Seana Larkina.

Podsumowanie

• Użyj aplikacji webpack-dashboard i bundlesize, aby na bieżąco sprawdzać rozmiar aplikacji
• Dowiedz się, co zwiększa rozmiar dzięki webpack-bundle-analyzer