Tiny Online Tools
Wohin sind all diese Bytes verschwunden?
Ein Produktions-Bundle ist eine einzige riesige minifizierte Datei. Zu wissen, dass sie 340 KB groß ist, sagt nichts über das Warum — und genau diese Frage zählt, wenn man versucht, sie zu verkleinern. Dieses Werkzeug beantwortet sie direkt: Lade das Bundle und seine .map-Datei, und jedes Byte wird dem Originalmodul zugeordnet, das es erzeugt hat.
Wie die Zuordnung funktioniert
Die Zuordnungen einer Source Map sagen: „generierte Spalte 4110 stammt aus src/utils/format.js". Dieses Werkzeug durchläuft jede Zuordnung der Datei der Reihe nach und misst den Abstand zur nächsten auf derselben generierten Zeile — dieser Abstand ist der generierte Codeabschnitt, der der Quelle dieser Zuordnung angerechnet wird. Es ist dieselbe zeilenbasierte Näherung, die auch das bekannte CLI-Tool source-map-explorer verwendet, und sie ist ehrlich darüber, eine Näherung zu sein: Zwei benachbarte Tokens auf derselben generierten Zeile ohne dazwischenliegende Zuordnung (ein verirrtes Leerzeichen, ein vom Minifizierer eingefügtes Zeichen) fallen in ihre eigene nicht zugeordnete Kategorie, statt stillschweigend einer benachbarten Quelle zugeschlagen zu werden.
Strukturelle Bytes — die Zeilenumbrüche zwischen generierten Zeilen — erhalten aus demselben Grund ihre eigene Kategorie: Sie gehören zur Struktur der Datei, nicht zu einem bestimmten Modul.
Die Abgleichsprüfung
Jeder Durchlauf zeigt ein wörtliches Ergebnis: X von Y Bytes insgesamt zugeordnet, plus die Anzahl der nicht zugeordneten und strukturellen Bytes, und ob zugeordnet + nicht zugeordnet + strukturell genau der Gesamtlänge der Datei entspricht. Das ist kein kosmetisches Detail — es ist die Garantie, dass kein Byte stillschweigend verloren ging oder doppelt gezählt wurde, und du kannst das selbst nachprüfen, statt dem Werkzeug einfach zu vertrauen.
Pro Datei oder pro Ordner
Wechsle zwischen einer Zeile pro Originaldatei oder einem Rollup nach oberstem Ordner — node_modules/lodash summiert alle Dateien, die lodash beigesteuert hat, sodass du siehst, „wie viel diese eine Abhängigkeit tatsächlich kostet", ohne vorher durch vierzig einzelne Dateien scrollen zu müssen. Alles ist nach Größe sortiert, größte zuerst, und der CSV-Export behält dieselben Zahlen für weitere Analysen bei.
Datenschutz
Beide Dateien werden vollständig im Browser gelesen und verarbeitet. Es wird nichts hochgeladen.