Tree Shaking

Kurz: Tree Shaking entfernt beim Bauen einer Webanwendung Code, der nie benutzt wird. So wird das ausgelieferte JavaScript kleiner und lädt schneller.

Genauer: Der Bundler analysiert die import- und export-Anweisungen (ES-Module) und erkennt, welche Funktionen tatsächlich verwendet werden. Alles andere gilt als „toter Ast” und wird nicht ins Bundle aufgenommen.

Im Detail

• Voraussetzung: ES-Module (import/export), nicht require(), weil nur sie statisch analysierbar sind.
• Seiteneffekte: Code, der beim Import etwas tut (zum Beispiel Globals setzen), darf nicht entfernt werden. Mit "sideEffects": false in der package.json erklärt eine Bibliothek, dass sie frei davon ist.
• Praxis: Aus einer großen Bibliothek nur das Nötige importieren (import { debounce } from "lib").
• Prüfen: Ein Bundle-Analyzer zeigt, welche Pakete wie viel Platz belegen.
• Grenzen: Dynamisch aufgebaute Zugriffe (lib[name]) kann kein Bundler vorhersehen.

Siehe auch: Lighthouse und Core Web Vitals