Tree-Shaking, im Tech-Kontext.
Tree-Shaking entfernt beim Build allen Code, den niemand importiert. Wirkt nur bei ES-Modulen und geht bei Sammelimporten zuverlässig wieder verloren.
Tree-Shaking ist der Schritt im Build, in dem der Bundler den Abhängigkeitsbaum abläuft und alles verwirft, was von keinem Einstiegspunkt aus erreichbar ist. Voraussetzung sind ES-Module mit statischen Importen; ältere CommonJS-Pakete lassen sich kaum analysieren und landen oft vollständig im Bundle. Zwei Muster verhindern die Wirkung zuverlässig: der Sammelimport einer ganzen Bibliothek und Module mit Nebenwirkungen beim Laden, die der Bundler deshalb sicherheitshalber behält. Das Feld sideEffects in der package.json ist der Schalter dafür. Prüfen lässt sich das Ergebnis nur am fertigen Bundle, etwa mit einem Visualizer, niemals am Quellcode.
Beispiele aus dem Mittelstand
- Ein Sammelimport einer Icon-Bibliothek zieht mehrere hundert Kilobyte ins Bundle, obwohl drei Symbole benutzt werden.
- Ein Datums-Paket in der alten Modulform bleibt komplett erhalten; der Wechsel auf eine ES-Modul-Alternative halbiert den Anteil.
// Zieht die komplette Bibliothek ins Bundle
import * as icons from "lucide-react";
// Lässt den Bundler alles Ungenutzte entfernen
import { ArrowRight } from "lucide-react";{
"name": "@firma/ui",
"sideEffects": ["*.css"]
}Folge-Fragen
Warum wirkt Tree-Shaking bei meinem Paket nicht?
Meist wegen CommonJS oder fehlender sideEffects-Angabe. Dann muss der Bundler annehmen, dass der Import Nebenwirkungen hat.
Reicht es, nur benannte Importe zu nutzen?
Das ist die halbe Miete. Die Bibliothek muss zusätzlich als ES-Modul ausgeliefert sein.
Wie messe ich den Effekt?
Bundle vor und nach der Änderung vergleichen. Ein Visualizer zeigt, welches Paket wie viel Anteil hat.
Ist Tree-Shaking dasselbe wie Code-Splitting?
Nein. Tree-Shaking entfernt ungenutzten Code, Code-Splitting verteilt den genutzten Code auf mehrere Dateien.
Tree-Shaking in der Praxis.
Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.
SEO-Performance