Was ist Tree-shaking?

Unter dem Begriff „Tree-shaking“ versteht man im Javascript-Kontext das Entfernen von nicht verwendeten Codes beim Erzeugen eines Bundles. Das verringert einerseits die Datei-Größe der erzeugten Bundles und minimiert die Javascript-Evaluation-Time. Der Vorgang kann automatisch beim Erzeugen eines Bundles integriert werden, oder es werden schon bewusst während des Programmierens nur die benötigten Funktionen aus den Dependency-Libraries importiert.

In Webpack wird zum Beispiel der „unused code“ nur markiert und muss dann erst mit einem Plugin wie uglify-js entfernt werden.

Ein Beispiel für den manuellen Ansatz ist hier mit der viel verwendeten Funktion „cloneDeep“ von der populären lodash-Library zu sehen:

import cloneDeep from "lodash/cloneDeep";

Es wird somit ausschließlich die Funktion anstatt der gesamten Bibliothek integriert.

Viele Libraries werden auch aus diesem Grund nicht mehr objektorientiert programmiert.

Tree-shaking ist eine „Must-have“ Performance-Optimierung beim Erstellen von Javascript-Bundles.