Kodedeling og lazy loading
Del store JavaScript-bundler i biter som lastes ved behov, med dynamiske importer og rute basert kodedeling, slik at brukere bare laster ned koden de faktisk trenger.
Kodedeling og lazy loading er en gratis leksjon i Optimalisering av webytelse og Lighthouse på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Optimalisering av webytelse og Lighthouse, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Problemet med monolittiske bunter
Når all JavaScript leveres i én bunt, må brukerne laste ned kode for sider de kanskje aldri besøker. Kodedeling deler bunten opp i mindre deler som bare lastes inn ved behov.
Dynamisk import()
Det dynamiske import()-uttrykket returnerer et promise og ber bundlere opprette en separat del. Modulen lastes ved behov under kjøring.
button.addEventListener('click', async () => {
const { renderChart } = await import('./chart.js');
renderChart();
});Ruterbasert deling
Den mest effektive oppdelingen er per rute: Hver side blir sin egen del, slik at den første innlastingen bare inneholder landingssiden.
const Dashboard = React.lazy(() => import('./pages/Dashboard'));Suspense-reserver
Vis en reserve mens en lazy-lastet del lastes inn, slik at brukergrensesnittet forblir responsivt. I React er dette Suspense; andre rammeverk har tilsvarende løsninger.
<Suspense fallback={<Spinner />}>
<Dashboard />
</Suspense>Deling på komponentnivå
Tunge widgeter som riktekstredigerere, kart eller diagrammer kan også deles opp og lastes inn først når brukeren åpner funksjonen, i stedet for ved første visning.
Leverandørdeling
Ved å skille tredjepartsbiblioteker ut i en leverandørdel kan den bufres uavhengig. Appkoden endres ofte, mens leverandørkoden sjelden gjør det, slik at brukerne trenger å laste ned mindre på nytt.
Forhåndslasting av deler
Lazy loading kan føre til en forsinkelse når brukeren navigerer. Forhåndslast delen når nettleseren er ledig, for eksempel når brukeren holder pekeren over en lenke, slik at den er klar før klikket.
link.addEventListener('mouseenter', () => import('./pages/Settings'));Unngå overdreven oppdeling
For mange små deler skaper overhead for forespørsler og vannfall. Sikt mot meningsfulle grenser (ruter og store funksjoner), ikke mot å dele opp hver lille funksjon.
Samspill med tree shaking
Kodedeling fungerer godt sammen med tree shaking: Bruk ES-modulimporter og importer bare det du trenger, slik at ubrukt kode aldri havner i noen del.
import { debounce } from 'lodash-es'; // only debounce is bundledMåle resultatet
Bruk en bundle-analyzer for å undersøke størrelsen på delene, og Coverage-fanen i DevTools for å finne ubrukt kode som ble sendt ved første innlasting. Lighthouse markerer store mengder ubrukt JavaScript.
Strategioppsummering
- Del først opp etter rute.
- Lazy-last tunge komponenter.
- Skill ut leverandørdeler for bufring.
- Forhåndslast sannsynlige neste deler når nettleseren er ledig.
Kort kontroll
Hvilken JavaScript-funksjon ber bundlere opprette en separat del som lastes inn ved behov?
Oppsummering
Du har lært å redusere den innledende datamengden med kodedeling: dynamisk import(), lazy loading på rute- og komponentnivå, leverandørdeling, forhåndslasting når nettleseren er ledig og tree shaking. Del opp ved meningsfulle grenser, og mål resultatet med en bundle-analyzer.
Lær deg Optimalisering av webytelse og Lighthouse med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Kodedeling og lazy loading» gratis?
Ja – hele teksten i «Kodedeling og lazy loading» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Optimalisering av webytelse og Lighthouse-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Hva lærer jeg i «Kodedeling og lazy loading»?
Del store JavaScript-bundler i biter som lastes ved behov, med dynamiske importer og rute basert kodedeling, slik at brukere bare laster ned koden de faktisk trenger. Du øver på Optimalisering av webytelse og Lighthouse med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Optimalisering av webytelse og Lighthouse?
Ingen tidligere erfaring er nødvendig. Optimalisering av webytelse og Lighthouse på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Kodedeling og lazy loading»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Optimalisering av webytelse og Lighthouse-leksjonen?
Ja. Alle Optimalisering av webytelse og Lighthouse-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Minimere JavaScript-nyttelasten
- Effektive strategier for lasting av skript
- Web Workers og avlasting fra hovedtråden
- Kodedeling og lazy loading