Koddelning och dynamiska importer
Dela automatiskt upp ditt bundle per route och använd dynamic import() för chunkar vid behov.
Koddelning och dynamiska importer är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Automatisk uppdelning
SvelteKit delar automatiskt upp bundles per route. Besökare laddar bara ned den JS som behövs för de routes de besöker.
Dynamisk import
Använd dynamisk import() för att läsa in moduler vid behov och få en mer detaljerad uppdelning.
const Heavy = (await import("./Heavy.svelte")).default;Villkorad inläsning
Läs bara in ett tungt bibliotek när en specifik användaråtgärd kräver det.
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}Namngivning av chunks
Vite namnger chunks på ett intelligent sätt. Vid behov kan du ge ledtrådar med kommentarer i stil med webpackChunkName.
Förinläsning
Använd data-sveltekit-preload-code för att förläsa route-kod när användaren håller muspekaren över en länk.
Bundle-storlek
Mindre initiala bundles innebär snabbare sidinläsning och bättre Core Web Vitals.
Tree shaking
SvelteKit tree-shakar automatiskt oanvända exporter via Vite/Rollup.
Lazy-komponenter
Omslut dynamiska importer i komponenter som renderas när de har lästs in.
Fallgropar
Dynamiska importer skapar asynkrona gränser. Hantera laddningstillstånd på ett smidigt sätt.
Bundle-analys
Använd visualiseringsverktyg för bundles för att identifiera vad som bör delas upp härnäst.
När uppdelning inte bör användas
För små moduler kostar uppdelningen mer än den sparar. Profilera för att hitta rätt granularitet.
Snabbkontroll
Hur delar SvelteKit som standard upp bundles?
Sammanfattning
Koduppdelning i SvelteKit sker automatiskt per route. Använd dynamisk import() för mer finfördelad lazy loading.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Koddelning och dynamiska importer” gratis?
Ja – hela texten till ”Koddelning och dynamiska importer” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Koddelning och dynamiska importer”?
Dela automatiskt upp ditt bundle per route och använd dynamic import() för chunkar vid behov. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Koddelning och dynamiska importer”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Koddelning och dynamiska importer
- Optimera bilder med @sveltejs/enhanced-img
- Lazy loading av komponenter
- Profilera SvelteKit-appar