Svelte · Senior · Question 51 of 75

How can you make a code-heavy component load only when needed?

{#await import("./Chart.svelte") then { default: Chart }}
  <Chart data={stats} />
{/await}

✓Correct answer: Use a dynamic import(); Vite splits it into a separate chunk
2Mark it with lazy attribute
3Svelte can't split code

Explanation

SvelteKit already splits code per route; dynamic imports help with heavy widgets inside a page.

Further reading

SvelteKit: Performance ↗

Test yourself

Take the Svelte · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.