Een bundler is een buildtool die alle losse codebestanden waarin een website geschreven is, samenpakt tot een paar compacte bestanden die een browser efficiënt kan laden. Ontwikkelaars verdelen hun werk over veel kleine bestanden om overzicht te houden, maar honderden minibestandjes naar een bezoeker sturen zou traag zijn. De bundler dicht dat gat.
Stel je een verhuizing voor met honderd losse spullen. Elk apart naar de bus dragen duurt eindeloos, dus je pakt ze eerst in een handvol goed gelabelde dozen. Een bundler doet hetzelfde met code: hij volgt de imports tussen JavaScript-bestanden, lost de afhankelijkheden op van eventuele JavaScript libraries die je gebruikt, en levert compacte bestanden die klaar zijn voor productie. Onderweg minificeert hij de code, verwerkt hij afbeeldingen en stijlen, en kan hij trucs toepassen zoals tree shaking om ongebruikte code eruit te gooien.
Moderne bundlers doen meer dan samenvoegen alleen. Tools als Vite en webpack ondersteunen code splitting, waarbij de bundle wordt opgesplitst in stukken die pas laden wanneer ze nodig zijn, zodat een bezoeker de code van de homepage binnenhaalt zonder het hele afrekenproces mee te slepen. Het resultaat is een site die minder verstuurt en sneller laadt. Tijdens het ontwikkelen doet dezelfde tool ook het omgekeerde werk. Hij let op je bestanden en herlaadt de browser zodra je een wijziging opslaat, vaak alleen het ene component dat je aanraakte in plaats van de hele pagina. Zo bedient één tool stilletjes twee groepen: hij houdt de ontwikkelaar snel tijdens het schrijven, en de bezoeker snel zodra de code live staat.
Bij TopDevs stellen we de bundler op elk project goed af, zodat bezoekers de kleinste hoeveelheid code binnenhalen die het werk nog steeds doet, wat de laadtijden laag houdt zonder dat wij bestanden met de hand hoeven te beheren.
