Hoppa till innehåll
TextArray1.41.0
100% lokalt

Webpack Stats Analyzer

Ta reda på vilka paket och moduler som tar upp mest utrymme i en webpack-build.

Inmatning
Utmatning
Relaterade verktyg
JSON-storleksanalysatornyUtvecklarverktyg
package.json beroendöversiktnyUtvecklarverktyg
Kompressionsstorlek-räknarenyUtvecklarverktyg
i18n nyckel diffUtvecklarverktyg
TOML till JSON-omvandlareUtvecklarverktyg
SQL till JSONUtvecklarverktyg
Webpack Stats Analyzer
Generera en stats.json från webpack (`webpack --json > stats.json` eller med `stats: { modules: true }` i din konfiguration) och klistra in den här för att se exakt vilka paket och moduler som blåser upp din bundle. Detta är det snabbaste sättet att svara på "varför är min build så stor" utan att installera ett bundle-analyzer-plugin eller bygga om med speciella flaggor – rapporten läser bara den JSON du redan har.
Gruppera rapporten efter node_modules paket för att se vilket beroende som kostar mest, eller efter mapp för att se vilken del av din egen källkod som är tyngst. Du kan också lämna den ogrupperad för att inspektera enskilda moduler en efter en. Alternativet "Rader att visa" begränsar en långt rapport till de största överträdarna; procentandel sätter varje rads storlek i sammanhanget mot totalen; och om din stats.json innehåller ett komprimerat storleksfält per modul (gzipSize eller sizeGzip), visar aktivering av kolumnen "Komprimerad storlek" båda siffrorna sida vid sida. Filtrering efter en ingångspunkt eller chunk-namn begränsar allt till ett paket, vilket är användbart när en app har mer än en utdatafil.
Verktyget flaggar också paket som visas på mer än en node_modules installationssökväg – ett vanligt tecken på att två beroenden kräver inkompatibla versioner av samma bibliotek och webpack slutligen levererar båda kopiorna. Dessa rader markeras i utmatningen så de är lätta att upptäcka även i en långt rapport. Välj tabellutmatning för en läsbar rapport eller CSV för inklistring i ett kalkylark när du spårar bundle storlek över tid.
Allt körs i din webbläsare: stats.json parsas och analyseras lokalt och laddas aldrig upp någonstans, så det är säkert att använda med proprietär kod. Kopiera resultatet, ladda ned det som en .txt-fil eller skicka det direkt till ett annat verktygs indata för att fortsätta arbeta.
FAQ
Hur genererar jag en stats.json?
Kör din webpack-build med `webpack --json > stats.json` eller lägg till `stats: { modules: true }` i din webpack-konfiguration så att kompilatorn skriver ut moduldata. Verktyget behöver en toppnivå "modules" array för att fungera.
Vad visar gruppering efter paket som gruppering efter mapp inte gör?
Gruppering efter paket kollapsar alla filer under node_modules/react (till exempel) till en rad, så du kan se ett beroendes totala fotavtryck. Gruppering efter mapp rapporterar istället dina egna källmappar, vilket är mer användbart för att hitta en överdimensionerad funktion i din egen kod.
Varför varnar det om "duplicerade" paket?
När två beroenden var och en kräver en annan version av samma bibliotek kan npm eller yarn kapsla en andra kopia i node_modules istället för att deduplicera den. Det här verktyget upptäcker ett paketnamn som visas under mer än en installationssökväg och flaggar det, eftersom borttagning av duplikatet ofta är ett enkelt sätt att förminska en bundle.
Visar den verklig gzip-storlek om min stats.json inte innehåller dem?
Nej. Komprimerad storlek visas bara när din stats.json redan innehåller ett gzipSize- eller sizeGzip-fält per modul – verktyget komprimerar aldrig något själv, eftersom det skulle betyda att köra ett byggsteg igen. Utan detta fält visar kolumnen "Komprimerad storlek" ett streck.
Laddas min stats.json upp någonstans?
Nej. Parsning och analys körs helt i din webbläsare – filen lämnar aldrig din enhet.