Tree Shaking

Dead Code Elimination, Ongebruikte Code Verwijdering, Code Eliminatie, Dode Code Eliminatie, Bundle Optimalisatie, Unused Code Elimination
Tree shaking is een optimalisatietechniek in moderne JavaScript bundlers die ongebruikte code automatisch verwijdert uit de uiteindelijke productie-build, waardoor de bestandsgrootte aanzienlijk wordt verkleind.
Webontwikkeling

Wat is Tree Shaking?

Tree shaking is een vorm van dead code elimination die wordt toegepast tijdens het build-proces van JavaScript-applicaties. De term is afgeleid van de metafoor waarbij een boom wordt geschud om dode bladeren te verwijderen - in dit geval wordt de code-'boom' geanalyseerd om ongebruikte modules en functies te identificeren en te verwijderen.

Deze techniek maakt gebruik van de statische structuur van ES6 module syntax (import en export statements) om te bepalen welke delen van de code daadwerkelijk worden gebruikt in de applicatie. Alleen de code die expliciet wordt geïmporteerd en gebruikt, wordt opgenomen in de uiteindelijke bundle.

Hoe werkt tree shaking?

Tree shaking werkt door middel van statische code-analyse tijdens het bundelen. Moderne bundlers zoals Webpack, Rollup en Vite analyseren de import- en export-statements in je code om een afhankelijkheidsgrafiek op te bouwen. Vervolgens worden alle exports die niet worden geïmporteerd of gebruikt, gemarkeerd als 'dode code' en weggelaten uit de productie-build.

Dit proces is alleen mogelijk met ES6 modules omdat deze een statische structuur hebben - alle imports en exports zijn bekend tijdens compile-time, in tegenstelling tot CommonJS modules die dynamisch kunnen zijn.

Voordelen van tree shaking

  • Kleinere bundel-grootte: Door ongebruikte code te verwijderen, wordt de totale bestandsgrootte significant verkleind
  • Snellere laadtijden: Kleinere bestanden betekenen snellere downloads en betere performance
  • Verbeterde gebruikerservaring: Snellere applicaties leiden tot hogere tevredenheid en betere conversies
  • Lagere bandbreedte-kosten: Minder data-overdracht bespaart kosten voor zowel ontwikkelaars als gebruikers
  • Betere code-kwaliteit: Stimuleert ontwikkelaars om modulaire, herbruikbare code te schrijven

Vereisten voor effectieve tree shaking

Om optimaal van tree shaking te profiteren, moeten bepaalde voorwaarden worden vervuld:

  • Gebruik van ES6 module syntax (import/export) in plaats van CommonJS (require/module.exports)
  • Een moderne bundler die tree shaking ondersteunt (Webpack 2+, Rollup, Vite, esbuild)
  • Production mode configuratie in de bundler
  • Libraries en dependencies die ook ES6 modules gebruiken
  • Vermijd side effects in modules of markeer ze expliciet in package.json

Toepassingen van Tree Shaking

Frontend frameworks en libraries

Tree shaking is essentieel bij het werken met moderne JavaScript frameworks en UI-libraries. Frameworks zoals React, Vue en Angular maken intensief gebruik van tree shaking om alleen de daadwerkelijk gebruikte componenten en functies in de bundle op te nemen.

Bijvoorbeeld, wanneer je alleen specifieke componenten uit een grote UI-library zoals Material-UI of Ant Design importeert, zorgt tree shaking ervoor dat alleen die componenten in je bundle terechtkomen, niet de hele library.

Utility libraries optimaliseren

Bij het gebruik van utility libraries zoals Lodash of date-fns kan tree shaking enorme besparingen opleveren. In plaats van de hele library te importeren (wat tientallen kilobytes kan zijn), kun je specifieke functies importeren:

import { debounce } from 'lodash-es';

Met tree shaking wordt alleen de debounce-functie en zijn directe dependencies opgenomen in de bundle, niet de honderden andere functies die Lodash bevat.

E-commerce platforms

Voor webshops en e-commerce applicaties is tree shaking cruciaal voor performance. Deze platforms hebben vaak complexe functionaliteit zoals productcatalogi, winkelwagenfunctionaliteit, betaalintegraties en klantaccounts. Door tree shaking worden alleen de modules geladen die op een specifieke pagina nodig zijn, wat resulteert in snellere laadtijden en betere conversies.

Progressive Web Apps (PWA)

Bij het bouwen van PWA's is bundel-grootte kritisch voor offline functionaliteit en snelle installatie. Tree shaking helpt om de initiële download zo klein mogelijk te houden, wat essentieel is voor gebruikers met langzame internetverbindingen of beperkte data.

Third-party integraties

Wanneer je werkt met SDK's van third-party services (analytics, betalingen, social media), importeer je vaak maar een klein deel van de beschikbare functionaliteit. Tree shaking zorgt ervoor dat alleen de benodigde API-calls en functies worden meegenomen, waardoor de overhead van externe integraties minimaal blijft.

Monorepo's en shared libraries

In monorepo-architecturen waar meerdere applicaties shared libraries gebruiken, is tree shaking onmisbaar. Elke applicatie kan selectief alleen de benodigde functionaliteit uit de shared codebase importeren, zonder dat de volledige library moet worden meegenomen.

Veelgestelde vragen

Tree shaking en code splitting zijn beide optimalisatietechnieken, maar werken fundamenteel anders:

Tree shaking verwijdert ongebruikte code uit je bundle door statische analyse van imports en exports. Het zorgt ervoor dat code die je hebt geïmporteerd maar niet gebruikt, niet in de uiteindelijke bundle terechtkomt.

Code splitting daarentegen verdeelt je code in meerdere kleinere bundles die on-demand kunnen worden geladen. Alle code wordt behouden, maar wordt strategisch opgesplitst om de initiële laadtijd te verbeteren.

Deze technieken vullen elkaar aan: tree shaking maakt je bundles kleiner door onnodige code te verwijderen, terwijl code splitting bepaalt hoe en wanneer de resterende code wordt geladen.

Tree shaking vereist statische code-analyse, wat betekent dat de bundler tijdens compile-time moet kunnen bepalen welke exports worden gebruikt. Dit is alleen mogelijk met ES6 modules.

ES6 modules hebben een statische structuur: alle import- en export-statements staan op het hoogste niveau van het bestand en kunnen niet conditioneel zijn. Dit maakt het mogelijk om tijdens het bundelen exact te bepalen welke code wordt gebruikt.

CommonJS modules daarentegen zijn dynamisch: require() kan overal in de code worden aangeroepen, zelfs binnen if-statements of functies. Dit maakt het onmogelijk om tijdens compile-time met zekerheid te bepalen welke modules worden gebruikt, waardoor tree shaking niet effectief kan werken.

Voor optimale tree shaking is het daarom belangrijk om ES6 module syntax te gebruiken en ervoor te zorgen dat je dependencies ook ES6 modules aanbieden (vaak aangegeven met een 'module' field in package.json).

Er zijn verschillende manieren om te verifiëren of tree shaking effectief werkt in je project:

1. Bundle analyzer gebruiken: Tools zoals webpack-bundle-analyzer of rollup-plugin-visualizer geven een visueel overzicht van wat er in je bundle zit. Je kunt hiermee zien of ongebruikte code daadwerkelijk is verwijderd.

2. Build output inspecteren: Voer een production build uit en inspecteer de gegenereerde JavaScript-bestanden. Zoek naar specifieke functies of modules die je niet gebruikt - als deze niet in de bundle staan, werkt tree shaking.

3. Bundle grootte vergelijken: Vergelijk de bundle-grootte voor en na het implementeren van tree shaking optimalisaties. Significante verkleining is een goed teken.

4. Webpack stats analyseren: Bij Webpack kun je --json > stats.json toevoegen aan je build command om gedetailleerde statistieken te genereren over wat er in de bundle zit.

5. Side effects checken: Zorg dat je package.json correct is geconfigureerd met "sideEffects": false of een array van bestanden met side effects, zodat de bundler weet welke modules veilig kunnen worden verwijderd.

Auteur & updates

Auteur: Wouter
Publicatiedatum: 16-02-2026
Laatste update: 16-02-2026