Přeskočit na obsah
100% lokálně

Analyzátor webpack statistik

Zjistěte, které balíky a moduly zabírají nejvíce místa v webpack buildu.

Vstup

Analyzátor webpack statistik

Vygenerujte stats.json z webpacku (`webpack --json > stats.json` nebo s `stats: { modules: true }` ve vaší konfiguraci) a vložte jej zde, abyste viděli přesně, které balíky a moduly zvětšují váš bundle. Toto je nejrychlejší způsob, jak si odpovědět na otázku "proč je můj build tak velký" bez instalace pluginu bundle-analyzer nebo opětovného buildu se speciálními příznaky — zpráva čte JSON, který již máte.

Seskupte zprávu podle balíku node_modules, abyste viděli, která závislost stojí nejvíce, podle složky, abyste viděli, která část vašeho vlastního zdrojového kódu je nejtěžší, nebo ji ponechte bez seskupení, abyste prozkoumali jednotlivé moduly jeden po druhém. Možnost počet řádků omezuje dlouhou zprávu na největší pachatele; procentuální podíl umisťuje velikost každého řádku do kontextu vzhledem k celkovému objemu; a pokud váš stats.json obsahuje pole komprimované velikosti na modul (gzipSize nebo sizeGzip), zapnutí sloupce komprimované velikosti zobrazuje obě čísla vedle sebe. Filtrování podle vstupního bodu nebo názvu chunku zúží všechno na jeden bundle, což je užitečné, jakmile má aplikace více než jeden výstupní soubor.

Nástroj také označuje balíky, které se objevují na více než jedné cestě instalace node_modules — běžný znak toho, že dvě závislosti fixují nekompatibilní verze stejné knihovny a webpack skončí s odesláním obou kopií. Tyto řádky jsou v přehledu označeny, takže se snadno najdou i v dlouhé zprávě. Vyberte si výstup tabulky pro čitelnou zprávu nebo CSV pro vložení do tabulky, když sledujete velikost bundlu v čase.

Všechno se spouští ve vašem prohlížeči: stats.json se analyzuje lokálně a nikdy se neposílá nikam jinde, takže je bezpečné jej používat s proprietárním kódem. Zkopírujte výsledek, stáhněte si jej jako soubor .txt nebo jej odešlete přímo na vstup jiného nástroje, abyste mohli pokračovat v práci.

Časté dotazy

Jak vygeneruji stats.json?
Spusťte váš webpack build s `webpack --json > stats.json` nebo přidejte `stats: { modules: true }` do vaší webpack konfigurace, aby kompilátor vytiskl data modulů. Nástroj potřebuje pole "modules" na nejvyšší úrovni.
Co zobrazuje seskupení podle balíku, co nezobrazuje seskupení podle složky?
Seskupení podle balíku sroluje každý soubor pod node_modules/react (například) do jednoho řádku, takže vidíte celkový obsah závislosti. Seskupení podle složky místo toho hlásí vaše vlastní zdrojové adresáře, což je užitečnější pro vyhledání nadměrné velikosti prvku ve vašem vlastním kódu.
Proč varuje na "duplicitné" balíky?
Když dvě závislosti vyžadují jinou verzi stejné knihovny, npm nebo yarn mohou hnízdit druhou kopii uvnitř node_modules namísto deduplikace. Tento nástroj detekuje název balíku, který se objevuje na více než jedné instalační cestě a označuje jej, protože odstranění duplikátu je často snadný způsob, jak zmenšit bundle.
Zobrazuje skutečné gzip velikosti, pokud můj stats.json nezahrnuje?
Ne. Komprimovaná velikost je zobrazena pouze pokud váš stats.json již obsahuje pole gzipSize nebo sizeGzip na modul — nástroj nikdy nic nekomprimuje, protože by to znamenalo opětovné spuštění kroku buildu. Bez tohoto pole sloupec komprimované velikosti zobrazuje pomlčku.
Můj stats.json je někde nahrán?
Ne. Analýza a parsování probíhají zcela ve vašem prohlížeči — soubor nikdy neopuští vaše zařízení.