Hva er Code Splitting?
Rask definisjon
Code splitting er en optimeringsteknikk som deler en applikasjons JavaScript-kode i mindre biter som kan lastes inn ved behov, og reduserer størrelsen på den opprinnelige bunten.
Modern web applications can have millions of lines of JavaScript. Without code splitting, all of this code gets bundled into a single file that every user must download before the application becomes interactive — even if they only visit one page.
Code splitting divides the application bundle into smaller chunks based on routes, components, or features. When a user visits the homepage, they only download the homepage code. When they navigate to the settings page, that code loads on demand. Libraries used only in specific features are split into their own chunks.
There are several approaches to code splitting. Route-based splitting loads code for each page separately (the most common approach). Component-based splitting loads heavy components on demand (like a rich text editor that's only needed when editing). Library splitting separates third-party dependencies into their own cacheable chunks.
Frameworks like Next.js implement route-based code splitting automatically. For component-level splitting, React's lazy() and Suspense enable developers to load components on demand. Webpack, Vite, and other bundlers handle the actual chunk creation and loading logic.
Hvorfor det betyr noe
Without code splitting, every user downloads your entire application regardless of what they need. For a large application, this could mean 2-5MB of JavaScript that blocks the page from becoming interactive. Code splitting can reduce the initial download by 60-80%.
This directly impacts Time to Interactive (TTI) and First Input Delay (FID), both critical Core Web Vitals that affect user experience and SEO rankings.
Eksempler fra virkeligheten
A SaaS dashboard reduced their initial JavaScript bundle from 3.2MB to 450KB through route-based code splitting, making the login page load in under 2 seconds instead of 8
An e-commerce site lazy-loaded their product review component (which included a heavy rich-text editor), saving 200KB from the initial product page load
A Next.js application automatically code-splits by route, so their 50-page application's homepage only loads 120KB of JavaScript instead of the total 4MB
A web app split their charting library into a separate chunk, so users who never visit the analytics dashboard don't download the 500KB chart library
Relaterte termer
Page Speed
Sidehastighet er et mål på hvor raskt en nettside lastes og blir interaktiv, og påvirker direkte brukeropplevelsen og rangeringer i søkemotorer.
Lazy Loading
Lazy loading er en teknikk som utsetter innlastingen av ikke-kritiske ressurser, som bilder under folden, til de faktisk er nødvendige.
Minification
Minifisering er prosessen med å fjerne unødvendige tegn — mellomrom, kommentarer, linjeskift — fra kildekoden (CSS, JavaScript eller HTML) for å redusere filstørrelse.
Core Web Vitals
Core Web Vitals er tre spesifikke måleverdier definert av Google som måler den faktiske brukeropplevelsen på nettsteder: innlastingsytelse (LCP), interaktivitet (INP) og visuell stabilitet (CLS).
Trenger du hjelp med code splitting?
Teamet vårt kan hjelpe deg med å omsette dette i praksis. Få en gratis konsultasjon for å diskutere prosjektet ditt.