Ga naar inhoud
TextArray1.41.0
100% lokaal

Webpack Stats Analyzer

Ontdek welke pakketten en modules de meeste ruimte innemen in een webpack-build.

Invoer
Uitvoer
Gerelateerde tools
JSON-grootte analyzernieuwOntwikkelaarstools
package.json afhankelijkheden overzichtnieuwOntwikkelaarstools
Compressiegrootte-calculatornieuwOntwikkelaarstools
i18n sleutel diffOntwikkelaarstools
TOML naar JSON-converterOntwikkelaarstools
SQL naar JSONOntwikkelaarstools
Webpack Stats Analyzer
Genereer een stats.json uit webpack (`webpack --json > stats.json` of met `stats: { modules: true }` in uw config) en plak deze hier in om precies te zien welke pakketten en modules uw bundle opblazen. Dit is de snelste manier om "waarom is mijn build zo groot" te beantwoorden zonder een bundle-analyzer-plugin te installeren of opnieuw te bouwen met speciale flags – het rapport leest gewoon de JSON die u al heeft.
Groepeer het rapport op node_modules pakket om te zien welke afhankelijkheid het meeste kost, of op map om te zien welk deel van uw eigen broncode het zwaarst is. U kunt ook ungroupeerd laten om afzonderlijke modules één voor één te inspecteren. De optie "Rijen weergeven" beperkt een lang rapport tot de grootste overtreders; percentagaandeel zet de grootte van elke rij in context tegen het totaal; en als uw stats.json per module een gecomprimeerde grootteveld bevat (gzipSize of sizeGzip), toont het inschakelen van de kolom "Gecomprimeerde grootte" beide nummers naast elkaar. Filteren op een ingangspunt of chunknaam beperkt alles tot één bundel, wat nuttig is wanneer een app meerdere uitvoerbestanden heeft.
Het gereedschap markeert ook pakketten die onder meer dan één node_modules installatiepad voorkomen – een veelgebruikt teken dat twee afhankelijkheden inkompatibele versies van dezelfde bibliotheek vereisen en webpack uiteindelijk beide kopieën verstuurt. Deze rijen worden in de uitvoer gemarkeerd, zodat ze zelfs in een lang rapport gemakkelijk op te merken zijn. Kies tabeluitvoer voor een leesbaar rapport of CSV voor het plakken in een spreadsheet wanneer u de bundel grootte in de loop van de tijd volgt.
Alles wordt in uw browser uitgevoerd: de stats.json wordt lokaal geparst en geanalyseerd en wordt nooit ergens geüpload, dus het is veilig om te gebruiken met propriëtaire code. Kopieer het resultaat, download het als .txt-bestand, of stuur het rechtstreeks naar de invoer van een ander hulpmiddel om door te gaan.
FAQ
Hoe genereer ik een stats.json?
Voer uw webpack build uit met `webpack --json > stats.json` of voeg `stats: { modules: true }` toe aan uw webpack config zodat de compiler module data afdrukt. Het gereedschap heeft een top-level "modules" array nodig om te werken.
Wat toont groepering op pakket wat groepering op map niet toont?
Groepering op pakket samenvat alle bestanden onder node_modules/react (bijvoorbeeld) tot één rij, zodat u de totale voetafdruk van een afhankelijkheid kunt zien. In plaats daarvan meldt groepering op map uw eigen brondirectory's, wat handiger is om een overgrote functie in uw eigen code te vinden.
Waarom waarschuwt het voor "gedupliceerde" pakketten?
Wanneer twee afhankelijkheden elk een ander versie van dezelfde bibliotheek vereisen, kunnen npm of yarn een tweede kopie in node_modules nesten in plaats van deze te dedupliceren. Dit gereedschap ontdekt een pakketnaam die onder meer dan één installatiepad voorkomt en markeert deze, omdat het verwijderen van het duplicaat vaak een eenvoudige manier is om een bundel te verkleinen.
Toont het echte gzip-grootten als mijn stats.json deze niet bevat?
Nee. Gecomprimeerde grootte wordt alleen weergegeven als uw stats.json al een gzipSize- of sizeGzip-veld per module bevat – het gereedschap comprimeert nooit zelf, omdat dat zou betekenen dat u een bouwstap opnieuw moet uitvoeren. Zonder dit veld geeft de kolom "Gecomprimeerde grootte" een streepje aan.
Wordt mijn stats.json ergens geüpload?
Nee. Parsen en analyse worden volledig in uw browser uitgevoerd – het bestand verlaat uw apparaat nooit.