Sări la conținut
Complet local

Analizor de stats webpack

Aflați care pachete și module ocupă cel mai mult spațiu într-o construcție webpack.

Intrare
Ieșire

Analizor de stats webpack

Generați un stats.json din webpack (`webpack --json > stats.json`, sau cu `stats: { modules: true }` în configurația dvs.) și lipiți-l aici pentru a vedea exact care pachete și module îți gonflează bundle-ul. Acesta este cel mai rapid mod de a răspunde la "de ce este construcția mea atât de mare" fără a instala un plugin bundle-analyzer sau fără a reconstrui cu steaguri speciale — raportul citește JSON-ul pe care deja îl aveți.

Grupați raportul după pachet node_modules pentru a vedea care dependență costă cel mai mult, după director pentru a vedea care parte din propriul dvs. copac sursă este mai greu, sau lăsați-l negrupat pentru a inspecta module individuale una câte una. Opțiunea rânduri-de-afișat limitează un raport lung la cei mai mari vinovați; procentul din total pune dimensiunea fiecărui rând în context față de total; și dacă stats.json conține un câmp de dimensiune comprimată per modul (gzipSize sau sizeGzip), activarea coloanei de dimensiune comprimată arată ambele numere alături. Filtrarea după un punct de intrare sau nume de chunk restricționează totul la un bundle, ceea ce este util când o aplicație are mai mult de un fișier de ieșire.

Instrumentul marchează, de asemenea, pachete care apar la mai mult de o cale de instalare node_modules — un semn comun că două dependențe fixează versiuni incompatibile ale aceleiași biblioteci și webpack ajunge să expedieze ambele copii. Acele rânduri sunt marcate în ieșire pentru a fi ușor de observat chiar și într-un raport lung. Alegeți ieșire tabel pentru un raport ușor de citit sau CSV pentru a lipi într-o foaie de calcul atunci când urmăriți dimensiunea bundle-ului în timp.

Totul funcționează în browserul dvs.: stats.json este analizat și procesat local și nu este niciodată încărcat nicăieri, deci este sigur de folosit cu o bază de cod proprietară. Copiați rezultatul, descărcați-l ca fișier .txt, sau trimiteți-l direct la intrarea altui instrument pentru a continua lucrul.

FAQ

Cum generez un stats.json?
Executați construcția webpack cu `webpack --json > stats.json`, sau adăugați `stats: { modules: true }` la configurația webpack astfel încât compilatorul să tipărească date de modul. Instrumentul necesită o matrice "modules" de nivel superior pentru a funcționa.
Ce afișează gruparea după pachet pe care gruparea după director nu o face?
Gruparea după pachet preia toate fișierele sub node_modules/react (de exemplu) într-un singur rând, deci puteți vedea amprenta totală a unei dependențe. Gruparea după director, în schimb, raportează propriile dvs. directoare sursă, ceea ce este mai util pentru a găsi o funcție prea mare în propriul dvs. cod.
De ce avertizează despre pachete "duplicate"?
Când două dependențe necesită fiecare o versiune diferită a aceleiași biblioteci, npm sau yarn pot imbrinca o a doua copie în node_modules în loc să o deduplice. Acest instrument detectează un nume de pachet care apare la mai mult de o cale de instalare și îl marchează, deoarece eliminarea duplicatului este adesea o modalitate ușoară de a micșora dimensiunea bundle-ului.
Afișează dimensiuni gzip reale dacă stats.json nu le include?
Nu. Dimensiunea comprimată este afișată doar atunci când stats.json conține deja un câmp gzipSize sau sizeGzip per modul — instrumentul nu comprimă niciodată nimic de la sine, deoarece ar trebui să re-executați un pas de construire. Fără acel câmp, coloana de dimensiune comprimată afișează un dash.
Este stats.json încărcat undeva?
Nu. Analiza și procesarea se desfășoară în întregime în browserul dvs. — fișierul nu părăsește niciodată dispozitivul dvs.