Sveltejs Academy · Lesson

Lazy Loading Components

Defer non-critical component rendering with dynamic imports and intersection observers.

Why Lazy Load

Defer loading of heavy or non-critical components to reduce initial bundle size.

Use import() to load a module asynchronously.

let Component;
onMount(async () => {
  Component = (await import("./Heavy.svelte")).default;
});