Tree Shaking

TL;DR

Tree Shaking entfernt unbenutzten Code beim Build-Prozess – nur was wirklich gebraucht wird, landet im finalen Bundle.

Was ist Tree Shaking?

Tree Shaking ist ein Optimierungsverfahren, das unbenutzten Code ("Dead Code") automatisch aus dem finalen JavaScript-Bundle entfernt. Der Name kommt von der Vorstellung, einen Baum zu schütteln, sodass tote Blätter abfallen.

Wenn eine Library 100 Funktionen enthält, du aber nur 5 nutzt, werden nur diese 5 im Bundle landen – nicht alle 100.

Wie Tree Shaking funktioniert

• Bundler analysiert, welcher Code importiert und verwendet wird
• Ungenutzte Exports werden markiert
• Beim Minifizieren wird ungenutzter Code entfernt
• Ergebnis: Deutlich kleinere Bundles

Voraussetzungen für Tree Shaking

• ES Modules: import/export statt require()
• Side-Effect-Free: Code ohne Nebeneffekte
• Moderner Bundler: Webpack 4+, Rollup, Vite, esbuild
• sideEffects in package.json: Deklariert, welche Dateien Nebeneffekte haben

Tree Shaking und Nachhaltigkeit

Tree Shaking ist nachhaltige Optimierung par excellence:

• Bis zu 50-70% kleinere Bundles möglich
• Weniger zu übertragen = weniger Energie
• Schnellere Ausführung = weniger CPU-Zeit
• Funktioniert automatisch ohne manuellen Aufwand

Best Practices

• Libraries mit ES Module Support wählen
• Spezifische Imports nutzen: import { map } from 'lodash-es'
• Barrel-Exports vermeiden (index.js, das alles re-exportiert)
• Bundle-Analyzer verwenden, um toten Code zu finden

Fazit

Tree Shaking ist eine der wichtigsten Build-Optimierungen. Es passiert automatisch, wenn der Code richtig strukturiert ist, und kann die Bundle-Größe drastisch reduzieren. Jedes moderne Webprojekt sollte davon profitieren.