Monitorowanie i analizowanie aplikacji

Jakie narzędzia wykorzystać, aby śledzić i analizować pakiet webpack?

Ivan Akulov

Nawet jeśli skonfigurujesz webpacka tak, aby aplikacja była jak najmniejsza, musisz wiedzieć, co zawiera. Możesz też zainstalować zależność, która sprawi, że aplikacja będzie dwa razy większa – i nawet tego nie zauważysz.

W tej sekcji opisujemy narzędzia, które pomogą Ci zrozumieć pakiet.

Śledź rozmiar pakietu

Aby monitorować rozmiar aplikacji, podczas tworzenia używaj webpack-dashboard, a w przypadku ciągłej integracji – bundlesize.

webpack-dashboard

Narzędzie webpack-dashboard wzbogaca dane wyjściowe webpacka o rozmiary zależności, postępy i inne szczegóły. Wygląda to tak:

Ten panel pomaga śledzić duże zależności – jeśli je dodasz, od razu zobaczysz je w sekcji Moduły.

Aby go włączyć, zainstaluj pakiet webpack-dashboard:

npm install webpack-dashboard --save-dev

Dodaj wtyczkę w sekcji plugins w pliku konfiguracji:

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

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

lub compiler.apply(), jeśli używasz serwera deweloperskiego Express:

compiler.apply(new DashboardPlugin());

Możesz swobodnie korzystać z panelu, aby znaleźć możliwe miejsca do ulepszenia. Na przykład możesz przewinąć sekcję Moduły, aby sprawdzić, które biblioteki są zbyt duże i można je zastąpić mniejszymi alternatywami.

rozmiar pakietu

bundlesize sprawdza, czy zasoby webpack nie przekraczają określonych rozmiarów. Zintegruj go z procesem CI, aby otrzymywać powiadomienia, gdy aplikacja stanie się zbyt duża:

Aby skonfigurować tę funkcję:

Maksymalne rozmiary

1. Zoptymalizować aplikację tak, aby była jak najmniejsza Uruchom wersję produkcyjną.

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

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

3. Wykonaj polecenie bundlesize za pomocą polecenia npx:

   npx bundlesize
   

   Spowoduje to wydrukowanie rozmiaru każdego pliku skompresowanego do formatu 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 10–20% do każdego rozmiaru, aby uzyskać maksymalne rozmiary. Margines 10–20% pozwoli Ci rozwijać aplikację jak zwykle, jednocześnie ostrzegając Cię, gdy jej rozmiar zacznie się zbytnio zwiększać.

   Włącz bundlesize

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

   npm install bundlesize --save-dev
   

6. W sekcji bundlesize w package.json określ konkretne maksymalne rozmiary. W przypadku niektórych plików (np. obrazów) możesz określić maksymalny rozmiar na podstawie typu pliku, a nie 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 wykonać sprawdzanie:

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

8. Skonfiguruj CI tak, aby wykonywać npm run check-size przy każdym wypychaniu. (i zintegrować bundlesize z GitHubem, jeśli projekt jest w nim tworzony).

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

W przypadku błędów:

Więcej informacji

• Alex Russell o czasie wczytywania, na który powinniśmy się nastawić

Analizowanie, dlaczego pakiet jest tak duży

Możesz dokładniej przeanalizować pakiet, aby sprawdzić, które moduły zajmują w nim miejsce. Meet webpack-bundle-analyzer:

analizator pakietów-pakietów Webpack skanuje pakiet i tworzy wizualizację jego zawartości. Za pomocą tej wizualizacji możesz znaleźć duże lub niepotrzebne zależności.

Aby korzystać z analizatora, zainstaluj pakiet webpack-bundle-analyzer:

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

dodać wtyczkę do konfiguracji webpack:

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

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

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

Domyślnie na stronie statystyk widać rozmiar przeanalizowanych plików (tj. plików wyświetlanych w pakiecie). Najlepiej porównać rozmiary w formacie gzip, ponieważ jest on zbliżony do rozmiarów, które widzą prawdziwi użytkownicy. Aby przełączyć rozmiary, użyj paska bocznego po lewej stronie.

Na co zwrócić uwagę w raporcie:

• Duże zależności. Dlaczego są tak duże? Czy są inne mniejsze alternatywne rozwiązania (np. Preact zamiast React? Czy używasz całego kodu (np. Moment.js zawiera wiele lokalizacji, których często nie używasz i które można usunąć?
• Zduplikowane zależności Czy ta sama biblioteka pojawia się w kilku plikach? (np. użyj opcji optimization.splitChunks.chunks w webpack 4 lub CommonsChunkPlugin w webpack 3, aby przenieść go do wspólnego pliku). Czy pakiet zawiera kilka wersji tej samej biblioteki?
• Podobne zależności. Czy istnieją podobne biblioteki, które pełnią mniej więcej to samo zadanie? (np. moment i date-fns lub lodash i lodash-es). Spróbuj używać tylko jednego narzędzia.

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

Podsumowanie

• Używaj metod webpack-dashboard i bundlesize, aby sprawdzać, jak duża jest Twoja aplikacja
• Dowiedz się, co zwiększa rozmiar za pomocą webpack-bundle-analyzer