Code-splitting en dynamische imports
Splits uw bundle automatisch per route en gebruik dynamic import() voor chunks die op aanvraag worden geladen.
Code-splitting en dynamische imports is een gratis Sveltejs Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Sveltejs Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Sveltejs Academy bevat in totaal 4 lessen.
Automatisch splitsen
SvelteKit splitst bundels automatisch per route. Bezoekers downloaden alleen de JavaScript voor de routes die ze bezoeken.
Dynamische import
Gebruik voor een fijnere verdeling import() om modules op aanvraag te laden.
const Heavy = (await import("./Heavy.svelte")).default;Voorwaardelijk laden
Laad een zware bibliotheek alleen wanneer een specifieke gebruikersactie dat vereist.
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}Chunks benoemen
Vite geeft chunks op intelligente wijze namen. Zo nodig kun je hints geven met opmerkingen in de stijl van webpackChunkName.
Vooraf laden
Gebruik data-sveltekit-preload-code om routecode vooraf te laden wanneer je over een link beweegt.
Bundelgrootte
Kleinere initiële bundels zorgen voor sneller laden van pagina's en betere Core Web Vitals.
Tree-shaking
SvelteKit verwijdert via Vite/Rollup automatisch ongebruikte exports.
Luie componenten
Wikkel dynamische imports in componenten die worden weergegeven zodra ze zijn geladen.
Valkuilen
Dynamische imports voegen asynchrone grenzen toe. Verwerk laadstatussen op een gebruiksvriendelijke manier.
Bundelanalyse
Gebruik visualisaties van bundels om te bepalen wat je vervolgens moet splitsen.
Wanneer niet splitsen
Bij kleine modules kost splitsen meer dan het oplevert. Profileer je toepassing om de juiste granulariteit te vinden.
Korte controle
Hoe splitst SvelteKit bundels standaard?
Samenvatting
Het splitsen van code in SvelteKit gebeurt automatisch per route. Gebruik import() voor fijner afgestemd lui laden.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Code-splitting en dynamische imports” gratis?
Ja — de volledige tekst van “Code-splitting en dynamische imports” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Sveltejs Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Sveltejs Academy bevat in totaal 4 lessen.
Wat leer ik in “Code-splitting en dynamische imports”?
Splits uw bundle automatisch per route en gebruik dynamic import() voor chunks die op aanvraag worden geladen. Je oefent met Sveltejs Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Sveltejs Academy te beginnen?
Ervaring vooraf is niet nodig. Sveltejs Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Code-splitting en dynamische imports”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Sveltejs Academy?
Ja. Elke les over Sveltejs Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Code-splitting en dynamische imports
- Afbeeldingen optimaliseren met @sveltejs/enhanced-img
- Componenten lui laden
- SvelteKit-apps profileren