Monitorowanie i analizowanie aplikacji

Jakich narzędzi używać do śledzenia i analizowania pakietu webpack

Ivan Akulov

Nawet jeśli skonfigurujesz pakiet internetowy w taki sposób, aby aplikacja była jak najmniejsza, nadal ważne jest, aby zachować i dowiedzieć się, co zawiera. W przeciwnym razie możesz zainstalować zależność, która sprawi, że jest dwa razy większa i nawet jej nie zauważa!

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

Monitoruj rozmiar pakietu

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

panel pakietu webpack

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 dodasz taką zależność, zobaczysz ją natychmiast w sekcji Moduły.

Aby go włączyć, 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 usłudze Express:

compiler.apply(new DashboardPlugin());

Zachęcamy do zabawy na pulpicie nawigacyjnym, by znaleźć najlepsze miejsca, w których warto wprowadzić ulepszenia. Przykład: przewiń sekcję Moduły, aby sprawdzić, które biblioteki są za duże i można je zastąpić z mniejszych rozwiązań.

rozmiar pakietu

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

Aby skonfigurować tę funkcję:

Maksymalne rozmiary

1. Zoptymalizuj aplikację, aby była jak najmniejsza. Uruchom wersję produkcyjną.

2. Dodaj sekcję bundlesize do package.json z następującymi fragmentami treść:

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

3. Wykonaj bundlesize za pomocą npx:

   npx bundlesize
   

   Spowoduje to wydrukowanie rozmiaru skompresowanego każdego pliku:

   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. Marża na poziomie 10-20% pozwoliłaby dalej rozwijać aplikację w zwykły sposób, ostrzegając jednocześnie, że jej rozmiar się za bardzo powiększa.

   Włącz: bundlesize

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

   npm install bundlesize --save-dev
   

6. W sekcji bundlesize w package.json podaj beton. maksymalnych rozmiarów. 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 uruchomić sprawdzanie:

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

8. Skonfiguruj CI tak, aby wykonywać npm run check-size przy każdym wypychaniu. (Dodatkowo zintegruj bundlesizez GitHub, jeśli projektujesz na jego podstawie).

To wszystko. Jeśli uruchomisz npm run check-size lub przekażesz kod, zobaczysz, czy pliki wyjściowe odpowiednio małe:

W przypadku niepowodzenia:

Więcej informacji

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

Analiza przyczyny, dla której 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. Użyj tej aby znaleźć duże lub niepotrzebne zależności.

Aby użyć 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 strona statystyk pokazuje rozmiar przeanalizowanych plików (czyli plików w postaci, w jakiej występują w pakiecie). Warto porównać rozmiary plików gzip, ponieważ jest to bardziej zbliżone do rozmiaru experience; użyj paska bocznego po lewej stronie, aby zmienić rozmiar.

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, który zawiera (np. Moment.js zawiera wiele lokalizacji, których często nie używasz i które można usunąć?
• Zduplikowane zależności. Czy widzisz tę samą bibliotekę, która powtarza się w wielu 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.

Zwróć też uwagę na świetną analizę pakietu internetowego Seana Larkina pakiety.

Podsumowanie

• Używaj metod webpack-dashboard i bundlesize, aby sprawdzać, jak duża jest Twoja aplikacja
• Dowiedz się, co wpływa na wzrost dzięki webpack-bundle-analyzer