Analýzator webpack štatistík

Zistite, ktoré balíky a moduly zaberajú najviac miesta v webpack buildoch.

Vstup

Počet riadkovZoskupiť podľaFiltrovať podľa vstupného bodu alebo chunkuZobraziť komprimovanú veľkosť, ak je dostupnáZobraziť podiel z celkovej veľkostiOznačiť balíky zoskupené v niekoľkých verziáchFormát výstupu

Výstup

Analýzator webpack štatistík

Vygenerujte stats.json z webpacku (`webpack --json > stats.json` alebo s `stats: { modules: true }` vo vašej konfigurácii) a vložte ho sem, aby ste videli presne, ktoré balíky a moduly nafúkavajú vašu aplikáciu. Toto je najrýchlejší spôsob, ako si odpovedať na otázku "prečo je môj build taký veľký" bez inštalácie pluginu bundle-analyzer alebo nového buildu so špeciálnymi príznakmi — správa načíta JSON, ktorý už máte.

Zoskupte správu podľa balíka node_modules, aby ste videli, ktorá závislosť stojí najviac, podľa priečinka, aby ste videli, ktorá časť vášho vlastného zdrojového kódu je najťažšia, alebo ju ponechajte bez zoskupenia, aby ste skúmali jednotlivé moduly jeden po druhom. Možnosť počet riadkov limituje dlhú správu na najväčších páchateľov; percentuálny podiel umiestňuje veľkosť každého riadka do kontextu vo vzťahu k celkovému objemu; a ak vaš stats.json obsahuje pole komprimovanej veľkosti na modul (gzipSize alebo sizeGzip), aktivácia stĺpca komprimovanej veľkosti zobrazuje obe čísla vedľa seba. Filtrovanie podľa vstupného bodu alebo názvu chunku zúži všetko na jeden bundle, čo je užitočné, keď má aplikácia viac ako jeden výstupný súbor.

Nástroj tiež upozorňuje na balíky, ktoré sa objavujú na viac ako jednej ceste inštalácie node_modules — bežný znak toho, že dve závislosti pin-ujú nekompatibilné verzie tej istej knižnice a webpack skončí s odoslaním oboch kópií. Tieto riadky sú v čítaní označené, takže sú ľahko rozpoznateľné aj v dlhej správe. Vyberte si výstup tabuľky na čitateľnú správu alebo CSV na vloženie do tabuľky, keď sledujete veľkosť bundle v čase.

Všetko sa spúšťa vo vašom prehliadači: stats.json sa analyzuje a analyzuje miestne a nikdy sa neposiela nikam inde, takže je bezpečné ho používať s proprietárnym kódom. Skopírujte výsledok, stiahnite ho ako súbor .txt alebo ho odošlite priamo na vstup iného nástroja, aby ste mohli pokračovať v práci.

Časté otázky

Ako vygenerujem stats.json?

Spustite svoj webpack build s `webpack --json > stats.json` alebo pridajte `stats: { modules: true }` do vašej webpack konfigurácii, aby kompilátor vytlačil údaje o moduloch. Nástroj potrebuje pole "modules" na najvyššej úrovni.

Čo ukazuje zoskupenie podľa balíka, čo neukazuje zoskupenie podľa priečinka?

Zoskupenie podľa balíka skomprimuje každý súbor pod node_modules/react (napríklad) do jedného riadka, takže vidíte celkový obsah závislosti. Zoskupenie podľa priečinka namiesto toho hlási vaše vlastné zdrojové adresáre, čo je užitočnejšie na nájdenie nadmernej veľkosti funkcie vo vašom vlastnom kóde.

Prečo upozorňuje na "duplicitné" balíky?

Keď dve závislosti vyžadujú inú verziu tej istej knižnice, npm alebo yarn môžu hniezdnu druhú kópiu vo vnútri node_modules namiesto deduplikácie. Tento nástroj deteguje názov balíka, ktorý sa objavuje na viac ako jednej ceste inštalácie a označuje ho, pretože odstránenie duplicity je často ľahký spôsob ako zmenšiť bundle.

Zobrazuje reálne gzip veľkosti, ak môj stats.json neobsahuje?

Nie. Komprimovaná veľkosť je zobrazená iba keď váš stats.json už obsahuje pole gzipSize alebo sizeGzip na modul — nástroj nikdy nič nekomprimuje, pretože by to znamenalo opätovný spustenie kroku buildu. Bez tohto poľa stĺpec komprimovanej veľkosti zobrazuje pomlčku.

Môj stats.json je nahravaný niekde?

Nie. Parsovanie a analýza sa spúšťajú úplne vo vašom prehliadači — súbor nikdy nezanecháva vaše zariadenie.

Analýzator webpack štatistík

Súvisiace nástroje

Analýzator webpack štatistík

Časté otázky