Kodedeling og lazy loading
Opdel store JavaScript-bundles i chunks, der hentes efter behov, med dynamiske imports og rute-baseret splitting, så brugere kun downloader den kode, de faktisk har brug for.
Kodedeling og lazy loading er en gratis Optimering af webydeevne og Lighthouse-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Optimering af webydeevne og Lighthouse, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Optimering af webydeevne og Lighthouse-kurset indeholder 4 lektioner i alt.
Problemet med den monolitiske bundle
Når al JavaScript leveres i én bundle, tvinges brugerne til at downloade kode til sider, de måske aldrig besøger. Kodeopdeling opdeler bundlen i mindre chunks, der kun indlæses efter behov.
Dynamisk import()
Det dynamiske import()-udtryk returnerer et promise og fortæller bundlere, at der skal oprettes en separat chunk. Modulet indlæses efter behov under kørsel.
button.addEventListener('click', async () => {
const { renderChart } = await import('./chart.js');
renderChart();
});Ruteopdelt kode
Den mest effektive opdeling er pr. rute: Hver side bliver sin egen chunk, så den indledende indlæsning kun indeholder landingssiden.
const Dashboard = React.lazy(() => import('./pages/Dashboard'));Suspense-fallbacks
Mens en lazy chunk indlæses, skal du vise en fallback, så brugerfladen forbliver responsiv. I React er dette Suspense; andre frameworks har tilsvarende løsninger.
<Suspense fallback={<Spinner />}>
<Dashboard />
</Suspense>Komponentopdelt kode
Tunge widgets som rich text-editorer, kort eller diagrammer kan også opdeles, så de kun indlæses, når brugeren åbner funktionen, i stedet for ved den første rendering.
Opdeling af leverandørkode
Hvis tredjepartsbiblioteker placeres i en separat vendor-chunk, kan den caches uafhængigt. App-kode ændres ofte, mens leverandørkode sjældent gør, så brugerne skal downloade mindre igen.
Forudindlæsning af chunks
Lazy loading kan give en forsinkelse, når brugeren navigerer. Forudindlæs chunken i inaktiv tid, for eksempel når markøren holdes over et link, så den er klar før klikket.
link.addEventListener('mouseenter', () => import('./pages/Settings'));Undgå for meget opdeling
For mange små chunks skaber overhead fra anmodninger og vandfald. Sigt efter meningsfulde grænser, såsom ruter og store funktioner, i stedet for at opdele hver lille funktion.
Samspil med tree shaking
Kodeopdeling fungerer sammen med tree shaking: Brug ES-modulimporter, og importér kun det, du har brug for, så død kode aldrig kommer med i en chunk.
import { debounce } from 'lodash-es'; // only debounce is bundledMål resultatet
Brug en bundle-analyzer til at undersøge chunk-størrelser og fanen Coverage i DevTools til at finde ubrugt kode, der blev sendt med ved den indledende indlæsning. Lighthouse markerer stor mængde ubrugt JS.
Strategioversigt
- Opdel først efter rute.
- Indlæs tunge komponenter lazy.
- Adskil vendor-chunks til caching.
- Forudindlæs sandsynlige næste chunks i inaktiv tid.
Hurtigt tjek
Hvilken JavaScript-funktion fortæller bundlere, at de skal oprette en separat chunk, der indlæses efter behov?
Opsummering
Du har lært at reducere den indledende payload med kodeopdeling: dynamisk import(), lazy loading på rute- og komponentniveau, opdeling af leverandørkode, forudindlæsning i inaktiv tid og tree shaking. Opdel ved meningsfulde grænser, og mål med en bundle-analyzer.
Lær Optimering af webydeevne og Lighthouse med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Kodedeling og lazy loading” gratis?
Ja — hele teksten til “Kodedeling og lazy loading” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Optimering af webydeevne og Lighthouse-kurset, skal du opgradere til CoddyKit PRO. Optimering af webydeevne og Lighthouse-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Kodedeling og lazy loading”?
Opdel store JavaScript-bundles i chunks, der hentes efter behov, med dynamiske imports og rute-baseret splitting, så brugere kun downloader den kode, de faktisk har brug for. Du øver dig i Optimering af webydeevne og Lighthouse med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Optimering af webydeevne og Lighthouse?
Der kræves ingen tidligere erfaring. Optimering af webydeevne og Lighthouse på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Kodedeling og lazy loading”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Optimering af webydeevne og Lighthouse-lektion?
Ja. Alle Optimering af webydeevne og Lighthouse-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Minimering af JavaScript-payload
- Strategier til effektiv scriptindlæsning
- Web Workers og arbejde uden for main thread
- Kodedeling og lazy loading