Ugrás a tartalomhoz
100% helyi

Webpack stats analizátor

Keress meg, mely csomagok és modulok foglalnak el a legtöbb helyet egy webpack build-ben.

Bemenet
Kimenet

Webpack stats analizátor

Generálj egy stats.json fájlt a webpack segítségével (`webpack --json > stats.json`, vagy a `stats: { modules: true }` hozzáadásával a konfigurációdba), és illeszd be ide, hogy pontosan lásd, mely csomagok és modulok fújják fel a bundle-t. Ez a leggyorsabb módja annak, hogy válaszolj a "miért olyan nagy a build-em" kérdésre, anélkül, hogy egy bundle-analyzer plugint kellene telepítened vagy speciális flagekkel újra kellene fordítanod — a jelentés az olvas az általad már meglevő JSON fájlt.

Csoportosítsd a jelentést node_modules csomag szerint, hogy lásd mely függőség költsége a legnagyobb, mappa szerint, hogy lásd mely része a saját forráskódodnak a legsúlyosabb, vagy hagyd csoportosítás nélkül az egyes modulok egyenkénti vizsgálatához. A sorok-megjelenítendő opció egy hosszú jelentést korlátozhat a legnagyobb okmányokra; a százalékos arány minden sor méretét a teljeshez képest helyezi kontextusba; és ha az stats.json tartalmaz egy tömörített méret mezőt modulonként (gzipSize vagy sizeGzip), a tömörített-méret oszlop bekapcsolása mindkét számot egymás mellett mutatja. Az egy belépési pont vagy chunk név szerinti szűrés mindent csak egy bundle-re szűkít, amely hasznos, ha egy alkalmazásnak több kimeneti fájlja van.

Az eszköz azt is jelöli, hogy mely csomagok több node_modules telepítési útvonalban jelennek meg — általában annak a jele, hogy két függőség az ugyanazon könyvtár különböző verzióit igényli, és a webpack mindkét másolat szállítása végződik. Ezek a sorok megjelölésre kerülnek a kimenetben, így könnyen megtalálhatóak még egy hosszú jelentésben is. Válassz táblázat kimenetet egy olvasható jelentéshez, vagy CSV-t a táblázatkezelő beillesztéséhez, amikor a bundle méretét követed az idő múlásával.

Minden a böngésződben fut: a stats.json helyben kerül elemzésre, és soha nem töltődik fel sehova, így biztonságos a saját forráskódú codebase-szel való használat. Másolj meg az eredményt, töltsd le .txt fájlként, vagy küldd el közvetlenül egy másik eszköz bemenetéhez, hogy folytasd a munkát.

Gyakori kérdések

Hogyan generálok stats.json fájlt?
Futtasd a webpack build-et `webpack --json > stats.json` paranccsal, vagy add hozzá a `stats: { modules: true }` beállítást a webpack konfigurációdba, hogy a fordító moduli adatokat nyomtasson. Az eszköznek szüksége van egy felső szintű "modules" tömbre, hogy működjön.
Mit mutat meg a csomagok szerinti csoportosítás, amit a mappa szerinti csoportosítás nem?
A csomag szerinti csoportosítás összeomlasztja a node_modules/react alatt minden fájlt (például) egy sorba, így láthatod egy függőség teljes terhelését. A mappa szerinti csoportosítás helyette a saját forráskód könyvtárait jelenti, amely hasznosabb a saját kódodban egy túlméretezett funkció megtalálásához.
Miért figyelmeztet a "duplikált" csomagokra?
Amikor két függőség az ugyanazon könyvtár eltérő verzióit igényli, az npm vagy yarn egy második másolatot tehet be a node_modules-ba a deduplicitás helyett. Ez az eszköz egy csomagnevet észlel, amely több node_modules telepítési útvonalban jelenik meg, és jelöli azt, mivel a duplikált eltávolítása gyakran egy egyszerű módja a bundle zsugorítására.
Valódi gzip méreteket mutat-e, ha az stats.json nem tartalmazza őket?
Nem. A tömörített méret csak akkor jelenik meg, amikor az stats.json már hordoz egy gzipSize vagy sizeGzip mezőt modulonként — az eszköz soha nem tömörít semmit, mivel az azt jelentené, hogy újra kellene futtatnod egy build lépést. Ez a mező nélkül a tömörített-méret oszlop egy kötőjelet mutat.
Fel van töltve az stats.json valahova?
Nem. Az elemzés teljesen a böngésződben fut — az állomány soha nem hagyja el az eszközöd.