Webpack stats analyzer

Ugotovite, kateri paketi in moduli zavzamejo največ prostora v webpack gradnji.

Vhod

Vrst za prikazGrupiraj poFiltriraj po vstopni točki ali deluPrikaži kompresirано velikost, kadar je na voljoPrikaži delež skupne velikostiOznači pakete, dostavljene v več verzijahOblika rezultata

Izhod

Webpack stats analyzer

Generirajte stats.json iz webpacka (`webpack --json > stats.json`, ali z `stats: { modules: true }` v vaši konfiguraciji) in ga prilepite sem, da vidite točno, kateri paketi in moduli napihajo vašo gradnjo. To je najhitrejši način odgovora »zakaj je moja gradnja tako velika« brez namestitve bundle-analyzer vtičnika ali gradnje s posebnimi zastavicami — poročilo prebere JSON, ki ga že imate.

Poročilo grupirajte po node_modules paketu, da vidite, kateri paket stane največ, po mapi, da vidite, kateri del vaše lastne kode je najtežji, ali pa ga pustite negrupiranega, da pregledujete posamezne module enega za drugim. Možnost »vrst za prikaz« omejuje dolgo poročilo na največje povzročitelje; delež v skupni velikosti postavi velikost vsakega reda v kontekst skupne velikosti; in če vaš stats.json za modul vsebuje polje kompresivane velikosti (gzipSize ali sizeGzip), s prižigom stolpca kompresivane velikosti vidite obe številki drug ob drugem. Filtriranje po vstopni točki ali imenu dela zoži vse na en svežanj, kar je koristno, kadar ima aplikacija več kot eno izhodno datoteko.

Orodje tudi označi pakete, ki se pojavljajo na več kot eni poti namestitve node_modules — pogost znak, da sta dve odvisnosti zarešeni na različni verziji iste knjižnice in webpack naposled pošilja obe kopiji. Ti redovi so v izlazu označeni, da so enostavno vidni tudi v dolgem poročilu. Izberite izpis tabele za berljivo poročilo ali CSV za lepljenje v preglednico, kadar sledite velikosti svežnja skozi čas.

Vse se izvršuje v vašem brskalniku: stats.json se razčleni in analizira lokalno in se nikoli ne naloži nikamor, zato je varno uporabljati s lastno kodo. Kopirajte rezultat, ga preuzmite kot datoteko .txt ali ga pošljite direktno v vnos drugega orodja, da nadaljujete z delom.

FAQ

Kako naredim stats.json?

Pokrenite svojo webpack gradnjo z `webpack --json > stats.json`, ali dodajte `stats: { modules: true }` vaši webpack konfiguraciji, da bo prevajalnik natisniti podatke modulov. Orodje potrebuje nivo "modules" niz, da deluje.

Kaj grupisanje po paketu prikaže, kar grupisanje po mapi ne?

Grupisanje po paketu zsloji vsako datoteko pod node_modules/react (na primer) v en red, da vidite skupni odtis odvisnosti. Grupisanje po mapi namesto tega poroča vaš lastni izvorne direktorije, kar je bolj uporabno za iskanje preteške funkcije v vaši lastni kodi.

Zakaj opozarja na »podvojene« pakete?

Ko dve odvisnosti zahtevata različnih verzij iste knjižnice, npm ali yarn lahko gnezdita drugo kopijo v node_modules namesto deduplikacije. To orodje odkrije naziv paketa, ki se pojavljuje na več kot eni poti namestitve, in ga označi, saj je odstranjevanje podvojenih pogosto enostavna pot za zmanjšanje velikosti svežnja.

Prikaže pravo gzip velikost, če moj stats.json ne vključuje?

Ne. Kompresirana velikost se prikaže le, kadar vaš stats.json že nosi polje gzipSize ali sizeGzip na modul — orodje nikoli ne kompresira ničesar samo, ker bi to pomenilo ponovno poganjanje koraka gradnje. Brez tega polja stolpec kompresivane velikosti prikaže črto.

Je moj stats.json naložen nekje?

Ne. Razčlenjevanje in analiza se izvršujeta v celoti v vašem brskalniku — datoteka nikoli ne zapusti vašo napravo.

Webpack stats analyzer

Povezana orodja

Webpack stats analyzer

FAQ