Kort fortalt: Moderne bundlere (Vite, Webpack, m.fl.) kan opdele output i chunks. Ved route- eller komponent-baseret splitting downloader brugeren først den JavaScript der hører til den aktuelle side - resten hentes ved navigation eller senere interaktion.
Hvorfor det hjælper
- Mindre kode der skal parses og kompileres ved første besøg → lavere TBT og ofte bedre oplevet respons.
- Lavere databrug på mobil og hurtigere vej til første nyttige handling.
Splitting erstatter ikke behovet for at slette død kode - se tree shaking.
Dynamic import (mønster)
const mod = await import("./heavy-chart.js");Bundleren laver et separat asset. Brug når funktionen ikke er på kritisk path ved load - fx admin-diagrammer, tunge kort eller sjældne flows.
Typiske anvendelser
- Admin-only eller “Min side”-features der sjældent vises
- Store diagram-biblioteker, kort, video players
- Sprogafhængige pakker hvis I splitter oversættelser i separate filer (avanceret)
Faldgruber
- For mange små chunks → overhead; afbalancer med bundlerens chunking-strategi.
- Waterfall hvor brugerhandling venter på download - vis tydelige loading states og undgå at blokere UI uden feedback.
- Frameworks der stadig hydration-hele træet - splitting hjælper ikke hvis I alligevel sender og kører for meget på første skærm.
Relaterede begreber
FAQ
Er code splitting nok til WordPress?
Delvist. Tematiske plugins og page builders kan stadig injicere store globale bundles. I skal fjerne unødvendige assets per skabelon og måle - splitting i temaet hjælper ikke hvis plugins dominerer.
Skader code splitting SEO?
Ikke hvis kritisk indhold stadig findes i server-renderet HTML og ikke kun bag client-only rendering. Del JS så crawlere og brugere får meningsfuldt indhold uden at vente på hele appen.
Kan for mange chunks skade performance?
Ja - meget små filer kan give overhead. Brug [HTTP/2](/ordbog/http2/) eller [HTTP/3](/ordbog/http3/) og en fornuftig bundteringsstrategi; balancer chunk-størrelse mod antal round-trips.
Hvordan hænger splitting sammen med tree shaking?
Tree shaking fjerner død kode først; splitting opdeler det der er tilbage i chunks. Begge er ofte nødvendige - se [tree shaking](/ordbog/tree-shaking/).
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Fjern eller udsæt tunge tredjeparts scripts uden at ødelægge funktionalitet
Følg en praktisk guide til at finde, vurdere og udsætte tredjeparts scripts, så de ikke ødelægger LCP, INP og den samlede brugeroplevelse.
Sådan finder du lange tasks i DevTools og forbedrer INP
Lær hvordan du bruger DevTools til at finde lange tasks, tunge event handlers og JavaScript der gør siden træg at bruge.
Optimer cookie banner uden CLS og INP problemer
Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.
Hvordan tredjeparts scripts gør din hjemmeside langsom
Få overblik over hvordan chat widgets, tracking, consent, video embeds og andre tredjeparts scripts påvirker LCP, INP, CLS og TTFB.
Cookie banner og Core Web Vitals: den oversete årsag til dårlig brugeroplevelse
Se hvordan cookie bannere og consent scripts kan påvirke load, layout og interaktion, og lær hvordan du undgår at de ødelægger brugeroplevelsen.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
