Analizator statystyk webpack
Sprawdź, które pakiety i moduły zajmują najwięcej miejsca w bundlu webpack.
Analizator statystyk webpack
Wygeneruj stats.json z webpack (`webpack --json > stats.json` lub z `stats: { modules: true }` w konfiguracji) i wklej go tutaj, aby zobaczyć dokładnie, które pakiety i moduły powiększają Twój bundle. To najszybszy sposób aby odpowiedzieć sobie na pytanie "dlaczego mój build jest tak duży" bez instalacji pluginu bundle-analyzer lub przebudowy ze specjalnymi flagami — raport odczytuje JSON, który już masz.
Grupuj raport według pakietu node_modules, aby zobaczyć którą zależność kosztuje najwięcej, według folderu aby zobaczyć którą część Twojego kodu źródłowego waży najwięcej, lub pozostaw niegrupowany aby zbadać pojedyncze moduły jeden po drugim. Opcja liczba wierszy ogranicza długi raport do największych przestępców; udział procentowy umieszcza rozmiar każdego wiersza w kontekście całkowitej wielkości; a jeśli Twój stats.json zawiera pole skompresowanego rozmiaru na modul (gzipSize lub sizeGzip), włączenie kolumny skompresowanego rozmiaru pokazuje obie liczby obok siebie. Filtrowanie według punktu wejścia lub nazwy chunka zawęża wszystko do jednego bundla, co jest przydatne gdy aplikacja ma więcej niż jeden plik wyjściowy.
Narzędzie również oznacza pakiety pojawiające się w więcej niż jednej ścieżce instalacji node_modules — częsty znak że dwie zależności ustalają niezgodne wersje tej samej biblioteki i webpack kończy się wysyłając obie kopie. Te wiersze są oznaczone w raporcie, aby były łatwe do znalezienia nawet w długim raporcie. Wybierz wyjście tabeli dla czytelnego raportu lub CSV do wklejenia do arkusza kalkulacyjnego gdy śledzisz rozmiar bundla w czasie.
Wszystko działa w przeglądarce: stats.json jest analizowany lokalnie i nigdy nie jest wysyłany nigdzie indziej, więc bezpiecznie go używać z kodem własnościowym. Skopiuj wynik, pobierz go jako plik .txt lub wyślij go bezpośrednio na wejście innego narzędzia aby kontynuować pracę.