Lazy loading af komponenter
Udskyd rendering af ikke-kritiske komponenter med dynamiske imports og intersection observers.
Lazy loading af komponenter er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 3 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 Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvorfor lazy-indlæse
Udskyd indlæsningen af tunge eller ikke-kritiske komponenter for at reducere den indledende bundtstørrelse.
Dynamisk import
Brug import() til at indlæse et modul asynkront.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});Rendring efter indlæsning
Brug <svelte:component> til at rendere den dynamiske komponent.
{#if Component}
<svelte:component this={Component} />
{/if}Intersection Observer
Kombinér med IntersectionObserver for at indlæse, når pladsholderen kommer ind i visningsområdet.
Action-wrapper
Byg en genanvendelig use:lazy-action, der indkapsler mønstret.
Indlæsningstilstand
Vis et skelet eller en spinner, indtil komponenten er indlæst.
Brug under folden
Kommentarer, relaterede indlæg og widgets i sidefoden egner sig alle til lazy-indlæsning.
Ydelsesforbedringer
Reducerer den indledende JS og fremskynder TTI, især på mobilen.
Forudindlæsning
Du kan vælge at forudindlæse moduler ved hover eller tæt på visningsområdet for mere øjeblikkelige interaktioner.
Undgå for meget opdeling
For små komponenter opvejer omkostningen ved dynamisk import besparelsen.
Kombinér med streaming
For server-renderede sider giver streaming og lazy-hydrering en hurtig indledende visning.
Hurtigt tjek
Hvordan renderer du en dynamisk importeret komponent?
Opsummering
Lazy-indlæs tunge komponenter med dynamisk import og svelte:component, eventuelt udløst af, at de kommer ind i visningsområdet.
Lær HTML 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
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Lazy loading af komponenter” gratis?
Ja — hele teksten til “Lazy loading af komponenter” 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 Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Lazy loading af komponenter”?
Udskyd rendering af ikke-kritiske komponenter med dynamiske imports og intersection observers. Du øver dig i Sveltejs Academy 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å Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs Academy 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 3 af 4.
Hvor lang tid tager lektionen “Lazy loading af komponenter”?
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 Sveltejs Academy-lektion?
Ja. Alle Sveltejs Academy-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
- Code splitting og dynamiske imports
- Optimering af billeder med @sveltejs/enhanced-img
- Lazy loading af komponenter
- Profilering af SvelteKit-apps