Preskoči na sadržaj
100% lokalno

Webpack stats analyzer

Pronađite koje pakete i module zauzimaju najviše mjesta u webpack gradi.

Unos

Webpack stats analyzer

Generirajte stats.json iz webpacka (`webpack --json > stats.json`, ili s `stats: { modules: true }` u vašoj konfiguraciji) i zalijepite ga ovdje da vidite točno koji paketi i moduli napuhavaju vašu gradu. Ovo je najbrži način da odgovorite "zašto je moja gradnja tako velika" bez instaliranja bundle-analyzer plug-ina ili gradnje s posebnim zastavicama — izvještaj čita JSON koji već imate.

Grupirajte izvještaj po node_modules paketu da vidite koji ovisnost košta više, po mapi da vidite koji dio vašeg vlastitog source treea je najtežakši, ili ga ostavite grupirano da pregledavate pojedinačne module jedan po jedan. Opcija redaka za prikaz ograničava dugi izvještaj na najveće krivce; udio u postotcima stavlja veličinu svakog reda u kontekst prema ukupnom broju; a ako vaš stats.json ima polje kompresivane veličine po modulu (gzipSize ili sizeGzip), uključivanjem stupca kompresivane veličine vidjet ćete oba broja jedno pored drugog. Filtriranje po ulaznoj točki ili imenu chunkа сужavа sve na jedan bundle, što je korisno kada aplikacija ima više od jedne izlazne datoteke.

Alat također označava pakete koji se pojavljuju na više od jedne putanje instalacije node_modules — česta znak da dvije ovisnosti fiksiraju nekompatibilne verzije iste biblioteke i webpack završi sa slanjem obje kopije. Ti redovi su označeni u izlazu kako bi bili lako vidljivi čak i u dugom izvještaju. Odaberite izlaz tablice za čitljiv izvještaj ili CSV za lijepljenje u proračunsku tablicu kada pratite veličinu bundlea tijekom vremena.

Sve se izvršava u vašem pregledniku: stats.json se parsira i analizira lokalno i nikada se ne učitava nigdje, pa je sigurno koristiti s vlastitim kodom. Kopirajte rezultat, preuzmite ga kao .txt datoteku ili ga pošaljite direktno u unos drugog alata da nastavite raditi.

FAQ

Kako da generiram stats.json?
Pokrenite svoju webpack gradu s `webpack --json > stats.json`, ili dodajte `stats: { modules: true }` u vašu webpack konfiguraciju kako bi kompajler ispisao podatke modula. Alat trebati da ima top-level "modules" niz da radi.
Što grupisanje po paketu prikazuje što grupisanje po mapi ne pokazuje?
Grupisanje po paketu ujedinjava svaku datoteku pod node_modules/react (na primjer) u jedan red, kako biste vidjeli ukupnu stopicu ovisnosti. Grupisanje po mapi umjesto toga izvještava vaše vlastite source direktorije, što je korisnije za pronalaženje pretežkog dijela vaše vlastite kode.
Zašto upozorava na "duplikatne" pakete?
Kada dvije ovisnosti zahtijevaju različitim verzijama iste biblioteke, npm ili yarn mogu ugniježditi drugu kopiju unutar node_modules umjesto dedupliciranja. Ovaj alat otkriva naziv paketa koji se pojavljuje na više od jedne putanje instalacije i označava ga, jer uklanjanje duplikata često je jednostavan način da smanjite veličinu bundlea.
Prikazuje li stvarne gzip veličine ako moj stats.json ne uključuje njih?
Ne. Kompresirana veličina se prikazuje samo kada vaš stats.json već nosi gzipSize ili sizeGzip polje po modulu — alat nikada ne kompresira ništa sam, jer bi to značilo ponovno pokrenuti korak gradnje. Bez tog polja, stupac kompresivane veličine prikazuje crtu.
Je li moj stats.json učitan negdje?
Ne. Parsiranje i analiza se izvodimo potpuno u vašem pregledniku — datoteka nikada ne napušta vašu napraču.