Webpack-Bundle-Größen-Visualisierer

Fügen Sie ein Webpack-Stats-JSON ein (erzeugt mit webpack --json) und visualisieren Sie sofort, welche Module und Pakete am meisten zur Größe Ihres Bundles beitragen. Wechseln Sie zwischen Paket-, Modul- und Chunk-Ansicht. Erhalten Sie konkrete Optimierungsempfehlungen für die größten Abhängigkeiten. Die gesamte Analyse läuft in Ihrem Browser - Ihre Stats-Datei verlässt Ihr Gerät nie. Ohne Anmeldung.

Webpack Bundle Size Visualizer

Paste a webpack stats JSON (generated with webpack --json) and visualize module sizes - see which dependencies contribute most to your bundle. All analysis runs locally in your browser. Your stats file never leaves your device.

Webpack Stats JSONUpload stats.json

{
  "version": "5.88.0",
  "hash": "a1b2c3d4e5f6",
  "outputPath": "/dist",
  "chunks": [
    {
      "id": 0,
      "names": [
        "main"
      ],
      "size": 245000
    },
    {
      "id": 1,
      "names": [
        "vendor"
      ],
      "size": 890000
    },
    {
      "id": 2,
      "names": [
        "runtime"
      ],
      "size": 12000
    }
  ],
  "modules": [
    {
      "name": "./node_modules/react/index.js",
      "size": 6800
    },
    {
      "name": "./node_modules/react-dom/index.js",
      "size": 130000
    },
    {
      "name": "./node_modules/react-dom/cjs/react-dom.development.js",
      "size": 890000
    },
    {
      "name": "./node_modules/lodash/lodash.js",
      "size": 71000
    },
    {
      "name": "./node_modules/moment/moment.js",
      "size": 290000
    },
    {
      "name": "./node_modules/axios/lib/axios.js",
      "size": 13000
    },
    {
      "name": "./node_modules/axios/lib/core/Axios.js",
      "size": 4200
    },
    {
      "name": "./node_modules/@mui/material/Button/Button.js",
      "size": 18000
    },
    {
      "name": "./node_modules/@mui/material/TextField/TextField.js",
      "size": 22000
    },
    {
      "name": "./node_modules/@mui/material/Dialog/Dialog.js",
      "size": 15000
    },
    {
      "name": "./node_modules/@emotion/react/dist/emotion-react.cjs.dev.js",
      "size": 45000
    },
    {
      "name": "./node_modules/@emotion/styled/dist/emotion-styled.cjs.dev.js",
      "size": 28000
    },
    {
      "name": "./node_modules/date-fns/index.js",
      "size": 12000
    },
    {
      "name": "./node_modules/date-fns/format.js",
      "size": 8500
    },
    {
      "name": "./node_modules/date-fns/parseISO.js",
      "size": 3200
    },
    {
      "name": "./node_modules/chart.js/dist/chart.js",
      "size": 185000
    },
    {
      "name": "./node_modules/d3/dist/d3.node.js",
      "size": 520000
    },
    {
      "name": "./node_modules/highlight.js/lib/core.js",
      "size": 32000
    },
    {
      "name": "./node_modules/highlight.js/lib/languages/javascript.js",
      "size": 18000
    },
    {
      "name": "./node_modules/highlight.js/lib/languages/typescript.js",
      "size": 12000
    },
    {
      "name": "./src/components/App.tsx",
      "size": 4500
    },
    {
      "name": "./src/components/Header.tsx",
      "size": 2800
    },
    {
      "name": "./src/components/Dashboard.tsx",
      "size": 8900
    },
    {
      "name": "./src/components/UserList.tsx",
      "size": 5600
    },
    {
      "name": "./src/utils/api.ts",
      "size": 3200
    },
    {
      "name": "./src/utils/helpers.ts",
      "size": 1800
    },
    {
      "name": "./src/store/index.ts",
      "size": 2100
    },
    {
      "name": "./src/pages/Home.tsx",
      "size": 6700
    },
    {
      "name": "./src/pages/Settings.tsx",
      "size": 4300
    }
  ]
}

Generate with: webpack --json > stats.json or next build --debug

Warum unseren Webpack-Bundle-Größen-Visualisierer verwenden?

Sofortige Webpack-Bundle-Visualisierung: Visualisieren Sie Webpack-Bundle-Größen sofort im Browser - ohne Server-Upload und ohne Build-Tools. Unser Webpack-Bundle-Größen-Visualisierer analysiert Ihr Stats-JSON und rendert interaktive Größenbalken für Pakete, Module und Chunks.
Sicherer Webpack-Bundle-Größen-Visualisierer online: Ihr Webpack-Stats-JSON verlässt Ihr Gerät nie, wenn Sie diesen Visualisierer nutzen. Die 100 % clientseitige Verarbeitung bedeutet vollständige Privatsphäre - kein Cloud-Speicher, keine Server-Logs, keine Preisgabe des Quellcodes.
Webpack-Bundle-Größen-Visualisierer ohne Installation: Visualisieren Sie Webpack-Bundle-Größen direkt im Browser ohne npm-Pakete, ohne webpack-bundle-analyzer-Einrichtung und ohne Konto. Dieser kostenlose Webpack-Bundle-Größen-Visualisierer funktioniert in jedem modernen Browser.
Optimierungsempfehlungen und Paketanalyse: Erhalten Sie konkrete Optimierungsempfehlungen für Ihre wichtigsten Abhängigkeiten - moment.js, lodash, d3, MUI, chart.js und mehr. Sehen Sie die Bundle-Zusammensetzung (node_modules vs. App-Code) und den Größeneinfluss jedes Pakets.

Typische Anwendungsfälle des Webpack-Bundle-Größen-Visualisierers

Einhaltung des Bundle-Größenbudgets: Nutzen Sie den Webpack-Bundle-Größen-Visualisierer, um vor jedem Deployment zu prüfen, ob Ihr Bundle in Ihr Performance-Budget passt. Erkennen Sie die größten Verursacher und entdecken Sie Regressionen frühzeitig.
Audit und Austausch von Abhängigkeiten: Nutzen Sie den Webpack-Bundle-Größen-Visualisierer, um überdimensionierte Abhängigkeiten wie moment.js (290 KB) oder lodash (71 KB) zu identifizieren. Das Panel mit Optimierungsempfehlungen schlägt leichtere Alternativen für die häufigsten Fälle vor.
Überprüfung des Tree-Shaking: Nutzen Sie den Webpack-Bundle-Größen-Visualisierer, um zu prüfen, ob Tree-Shaking korrekt funktioniert. Zeigt ein Paket viele kleine Module statt eines großen Bundles, ist Tree-Shaking aktiv und arbeitet wie erwartet.
Optimierung der Core Web Vitals: Nutzen Sie den Webpack-Bundle-Größen-Visualisierer, um die größten JavaScript-Bundles zu finden, die Ihre LCP- und FID-Werte beeinträchtigen. Eine kleinere Haupt-Bundle-Größe verbessert direkt Time to Interactive und First Input Delay.
Performance-Berichte für Kunden: Nutzen Sie den Webpack-Bundle-Größen-Visualisierer, um Bundle-Zusammensetzungsdaten für Kunden-Performance-Berichte zu erzeugen. Zeigen Sie die Aufteilung node_modules vs. App-Code, die größten Pakete und konkrete Optimierungschancen.
Analyse des Code-Splittings: Nutzen Sie den Webpack-Bundle-Größen-Visualisierer, um Chunk-Größen zu analysieren und Chancen für Code-Splitting zu finden. Die Chunk-Ansicht zeigt, welche Chunks am größten sind und wie viele Module sie enthalten.

Was ist ein Webpack-Bundle-Größen-Visualisierer?

Ein Webpack-Bundle-Größen-Visualisierer analysiert die JSON-Ausgabe der Webpack-Stats-API und stellt visuell dar, welche Module und Pakete am meisten zur Größe Ihres Bundles beitragen. Unser Webpack-Bundle-Größen-Visualisierer liest die Arrays modules, chunks und assets aus dem Webpack-Stats-JSON und aggregiert Modulgrößen nach Paketnamen - und zeigt Ihnen genau, welche node_modules-Abhängigkeiten am größten sind. Die gesamte Analyse läuft vollständig in Ihrem Browser mit reinem JavaScript - ohne Server-Upload und ohne Installation von webpack-bundle-analyzer.

So funktioniert unser Webpack-Bundle-Größen-Visualisierer

1 Webpack-Stats-JSON erzeugen: Führen Sie webpack --json > stats.json oder next build --debug aus. Fügen Sie dann den Inhalt von stats.json in den Eingabebereich ein oder laden Sie die Datei direkt hoch.
2 Sofortige Analyse im Browser: Klicken Sie auf „Bundle visualisieren“ und der Webpack-Bundle-Größen-Visualisierer analysiert das JSON, aggregiert Modulgrößen nach Paketnamen und rendert Größenbalken für Pakete, Module und Chunks. Es werden keine Daten an einen Server gesendet.
3 Visualisierung und Empfehlungen prüfen: Wechseln Sie zwischen Paket-, Modul- und Chunk-Ansicht. Das Panel mit Optimierungsempfehlungen liefert konkrete Hinweise zu den größten Abhängigkeiten Ihres Bundles.

Was der Webpack-Bundle-Größen-Visualisierer zeigt

Bundle-Zusammensetzung: ein visueller Balken, der die Aufteilung zwischen node_modules (Drittanbieter-Abhängigkeiten) und App-Code zeigt - die meisten Bundles bestehen zu 70-90 % aus node_modules, dem wichtigsten Optimierungsziel.
Paketansicht: alle node_modules-Pakete nach Namen aggregiert und nach Gesamtgröße sortiert - zeigt, welche Abhängigkeiten am meisten zu Ihrem Bundle beitragen.
Modulansicht: die 20 größten einzelnen Module - nützlich, um konkrete Dateien zu finden, die unerwartet groß sind.
Chunk-Ansicht: alle Webpack-Chunks nach Größe sortiert - nützlich, um Chancen für Code-Splitting zu erkennen und die Struktur Ihres Bundles zu verstehen.

So erzeugen Sie Webpack-Stats-JSON

Für Webpack: Führen Sie webpack --json > stats.json aus oder fügen Sie {" "} zu Ihrer Webpack-Konfiguration hinzu. Für Next.js: Führen Sie next build --debug aus und suchen Sie die Stats-Datei in .next/. Für Create React App: Nutzen Sie source-map-explorer oder eject, um auf die Webpack-Konfiguration zuzugreifen. Der Webpack-Bundle-Größen-Visualisierer akzeptiert jedes Webpack-Stats-JSON - das Format ist bei Webpack 4 und Webpack 5 identisch.

Häufig gestellte Fragen

Ein Webpack-Bundle-Größen-Visualisierer analysiert das Webpack-Stats-JSON und stellt visuell dar, welche Module und Pakete am meisten zur Größe Ihres Bundles beitragen. Unser kostenloser Webpack-Bundle-Größen-Visualisierer arbeitet vollständig in Ihrem Browser.

Führen Sie „webpack --json > stats.json“ im Verzeichnis Ihres Projekts aus. Für Next.js führen Sie „next build --debug“ aus. Der Webpack-Bundle-Größen-Visualisierer akzeptiert Stats-JSON von Webpack 4 und Webpack 5.

Absolut. Der Webpack-Bundle-Größen-Visualisierer verarbeitet alles lokal in Ihrem Browser. Ihr Stats-JSON wird nie auf einen Server hochgeladen und verlässt Ihr Gerät nie.

Ja - 100 % kostenlos, für immer. Ohne Anmeldung, ohne Konto, ohne Premium-Tarif, ohne Dateigrößenbeschränkung und ohne Werbung.

Die Modulgröße ist die unkomprimierte Größe eines einzelnen JavaScript-Moduls. Die Chunk-Größe ist die kombinierte Größe aller Module in einer Webpack-Ausgabedatei. Der Webpack-Bundle-Größen-Visualisierer zeigt beide Ansichten.

Die meisten JavaScript-Bundles bestehen zu 70-90 % aus node_modules. Das ist normal. Der Webpack-Bundle-Größen-Visualisierer hilft Ihnen zu erkennen, welche konkreten Pakete am größten sind, damit Sie die Optimierung priorisieren können.

moment.js (durch date-fns ersetzen), lodash (Tree-Shaking nutzen), d3 (Subpakete importieren), MUI (benannte Importe verwenden) und chart.js (nur benötigte Diagrammtypen registrieren). Der Visualisierer gibt konkrete Empfehlungen.

Nein - der Webpack-Bundle-Größen-Visualisierer zeigt die unkomprimierten Modulgrößen, wie Webpack sie meldet. Die tatsächlichen Übertragungsgrößen sind mit GZIP kleiner (bei JavaScript typischerweise 60 bis 80 % Reduktion).

Ja - der Webpack-Bundle-Größen-Visualisierer unterstützt das Stats-JSON-Format von Webpack 4 und Webpack 5. Die Datenstruktur für Module und Chunks ist in beiden Versionen identisch.