Webpack Stats Analyzer
Finden Sie heraus, welche Pakete und Module den meisten Platz in einem Webpack-Build benötigen.
Webpack Stats Analyzer
Generieren Sie eine stats.json aus webpack (`webpack --json > stats.json` oder mit `stats: { modules: true }` in Ihrer Konfiguration) und fügen Sie sie hier ein, um genau zu sehen, welche Pakete und Module Ihr Bundle aufblähen. Dies ist der schnellste Weg, um "warum ist mein Build so groß" zu beantworten, ohne ein Bundle-Analyzer-Plugin zu installieren oder einen Neubuild mit speziellen Flags durchzuführen – der Bericht liest einfach die JSON, die Sie bereits haben.
Gruppieren Sie den Bericht nach node_modules Paket, um zu sehen, welche Abhängigkeit am meisten kostet, oder nach Ordner, um zu sehen, welcher Teil Ihres eigenen Quellcodes am schwersten ist. Sie können auch ungroupiert lassen, um einzelne Module einzeln zu inspizieren. Die Option "Reihen anzeigen" begrenzt einen langen Bericht auf die größten Verursacher; Prozentanteil setzt die Größe jeder Reihe im Kontext der Gesamtgröße in Beziehung; und wenn Ihre stats.json pro Modul ein komprimiertes Größenfeld trägt (gzipSize oder sizeGzip), zeigt das Aktivieren der Spalte "Komprimierte Größe" beide Zahlen nebeneinander an. Das Filtern nach einem Entry Point oder Chunk-Namen verengt alles auf ein Bundle, was nützlich ist, wenn eine App mehrere Ausgabedateien hat.
Das Tool kennzeichnet auch Pakete, die unter mehr als einem node_modules-Installationspfad vorhanden sind – ein häufiges Zeichen dafür, dass zwei Abhängigkeiten inkompatible Versionen derselben Bibliothek benötigen und webpack am Ende beide Kopien versendet. Diese Reihen werden in der Ausgabe markiert, sodass sie selbst in einem langen Bericht leicht zu erkennen sind. Wählen Sie Tabellenausgabe für einen lesbaren Bericht oder CSV zum Einfügen in eine Tabellenkalkulation, wenn Sie die Bundle-Größe über die Zeit verfolgen.
Alles läuft in Ihrem Browser: die stats.json wird lokal analysiert und wird nie irgendwo hochgeladen, sodass es sicher ist, sie mit proprietärem Code zu verwenden. Kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter, oder senden Sie es direkt zur Eingabe eines anderen Tools, um weiterzuarbeiten.