Code splitting is het opdelen van de JavaScript van een website in kleinere, losse bestanden die alleen laden wanneer ze nodig zijn. In plaats van bij het eerste bezoek één gigantische bundel te versturen, haalt de browser eerst een klein kernbestand op om de pagina aan de praat te krijgen en laadt de rest pas op het moment dat het nodig is.
Denk aan een verhuizing. Je kunt alles in één enorme kist proppen die met twee man en veel moeite naar binnen moet, of je pakt een paar duidelijk gelabelde dozen en draagt alleen die naar binnen voor de kamer die je als eerste inricht. Code splitting is die tweede aanpak: de afrekenlogica laadt pas als iemand bij de checkout komt, en een zware grafiekbibliotheek pas als er echt een grafiek in beeld komt. Dit hangt nauw samen met lazy loading, waarbij bestanden worden uitgesteld tot het moment van gebruik, en het steunt op een bundler die bepaalt waar de splitsing komt.
De winst zie je terug in echte cijfers. Kleinere eerste downloads verbeteren je Core Web Vitals en verkorten de laadtijd, wat vooral telt op mobiel waar elke kilobyte meeweegt. De keerzijde is wat extra complexiteit: split je te fijn, dan krijg je veel kleine verzoeken, split je te grof, dan verlies je het voordeel.
De logische plek om te splitsen is de pagina. Een bloglezer heeft zelden de code achter het admin-dashboard nodig, dus die code blijft in een eigen stuk en laadt voor hem nooit. Hetzelfde geldt voor een datumkiezer of een videospeler die pas verschijnt na een klik. Leg je die grenzen goed, dan voelt het eerste beeld bijna meteen klaar.
Bij TopDevs zetten we de splitspunten rond pagina’s en de zwaarste interactieve onderdelen, zodat de site van een klant snel aanvoelt bij het eerste beeld en de rest van de JavaScript stilletjes op de achtergrond binnenkomt.
