Jakie narzędzia należy wykorzystać, aby śledzić i analizować pakiet webpack?
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
Zoptymalizuj aplikację, aby była jak najmniejsza. Uruchom kompilację produkcyjną.
Dodaj sekcję
bundlesize
dopackage.json
z następującymi fragmentami treść:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
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
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
Zainstaluj pakiet
bundlesize
jako zależność deweloperską:npm install bundlesize --save-dev
W sekcji
bundlesize
wpackage.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", } ] }
Dodaj skrypt npm, aby uruchomić sprawdzanie:
// package.json { "scripts": { "check-size": "bundlesize" } }
Skonfiguruj CI do wykonywania
npm run check-size
przy każdym wypychaniu. (Dodatkowo zintegrujbundlesize
z 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 – lubCommonsChunkPlugin
– 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
idate-fns
lublodash
ilodash-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
ibundlesize
, aby sprawdzać, jak duża jest Twoja aplikacja - Dowiedz się, co wpływa na wzrost dzięki
webpack-bundle-analyzer