Tree shaking is een bouwstap die code verwijdert die je site wel importeerde maar nooit daadwerkelijk draait, zodat de JavaScript die naar bezoekers gaat zo klein mogelijk is. De naam komt van het idee dat je aan een boom schudt en de dode bladeren laat vallen, zodat alleen de levende takken overblijven.
Een praktisch voorbeeld. Je haalt een datumbibliotheek binnen om één kleine functie te gebruiken, maar diezelfde bibliotheek bevat tientallen andere die je nooit aanraakt. Zonder tree shaking zou alles meegestuurd worden. Met tree shaking volgt de bundler wat je code echt bereikt, houdt dat, en laat de rest vallen. Dit werkt het best als JavaScript libraries geschreven zijn met standaard import- en export-statements, want daarmee kan de tool het spoor netjes volgen.
Er zitten grenzen aan die je moet kennen. Gebruikt een bibliotheek nog de oudere CommonJS require-stijl, of verandert het importeren van een bestand stilletjes een globale instelling, dan kan de tool niet altijd bewijzen dat de code veilig weg kan, en houdt hij die voor de zekerheid. Daarom stuurt een vaag import * as utils vaak meer mee dan wanneer je precies de ene functie benoemt die je nodig hebt. Sommige bibliotheken helpen door zichzelf in hun pakketinstellingen als vrij van neveneffecten te markeren, wat de bundler vertelt dat hij ongebruikte stukken gerust mag weglaten.
De winst is simpel: een kleinere download betekent een snellere pagina, en dat telt het zwaarst op tragere mobiele verbindingen. Tree shaking draait meestal automatisch in tools als Vite en Rollup, en het werkt samen met technieken als code splitting om wat de browser bereikt tot een minimum te beperken.
Bij TopDevs leunen we op tree shaking en moderne bundlers zodat klantsites alleen de code meesturen die ze gebruiken, en de laadtijd kort blijft.
