Monitorowanie i analizowanie aplikacji

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

Ivan Akulov

Nawet jeśli skonfigurujesz pakiet internetowy w taki sposób, aby aplikacja była jak najmniejsza, nadal ważne jest, 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 znajdziesz narzędzia, które pomogą Ci zrozumieć Twój pakiet.

Monitoruj rozmiar pakietu

Aby sprawdzić rozmiar aplikacji, użyj: webpack-dashboard (w trakcie programowania, bundlesize w CI.

webpack-dashboard

webpack-dashboard ulepsza dane wyjściowe pakietu internetowego. z zależnościami, postępami i innymi szczegółami. Wygląda to tak:

Ten panel pomaga śledzić duże zależności – jeśli je dodasz, od razu zobaczysz 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 pakietu internetowego nie przekraczają w określonych rozmiarach. Zintegruj ją z CI, aby otrzymywać powiadomienia, gdy aplikacja stanie się zbyt duża:

Aby skonfigurować tę funkcję:

Informacje o maksymalnych rozmiarach

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

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

   // 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 otrzymać 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) warto określić maksymalny rozmiar jednego pliku typ, a nie poszczególne pliki:

   // 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 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 rzeczywistym czasie wczytywania cel

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

Dodaj wtyczkę do konfiguracji pakietu internetowego:

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

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

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

Domyślnie na stronie statystyk widać rozmiar przeanalizowanych plików (tj. plików w takiej postaci, w jakiej są wyświetlane w pakiecie). Warto porównać rozmiary plików gzip, ponieważ jest to bardziej zbliżone do rozmiaru doświadczenie; 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. Zapowiedz zamiast React)? Czy wykorzystujesz cały zawarty w nim kod (np. Moment.js zawiera wiele języków które są często nieużywane i mogą zostać usunięte)?
• Zduplikowane zależności. Czy widzisz tę samą bibliotekę, która powtarza się w wielu plikach? (Użyj np. opcja optimization.splitChunks.chunks – w pakiecie internetowym 4 – lub CommonsChunkPlugin – w pakiecie webpack 3 – w celu przeniesienia go do wspólnego pliku). Czy pakiet występuje w kilku wersjach do 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). Postaraj się korzystać z 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