Svelte Performance Optimization

Svelte is already highly optimized by default since it compiles components to efficient vanilla JavaScript. However, there are techniques to optimize further:

Keyed Each Blocks

<script>
  let items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];
</script>

<!-- ❌ Without key - recreates all nodes -->
{#each items as item}
  <div>{item.name}</div>
{/each}

<!-- ✅ With key - only updates changed items -->
{#each items as item (item.id)}
  <div>{item.name}</div>
{/each}

<!-- With index and key -->
{#each items as item, index (item.id)}
  <div>{index + 1}. {item.name}</div>
{/each}

Immutable Data

<svelte:options immutable={true} />

<script>
  // With immutable option, Svelte uses reference equality
  // More efficient for components with many props
  export let items;
  
  // Parent must create new reference
  // items = [...items, newItem];  ✅
  // items.push(newItem);           ❌ Won't detect change
</script>

Virtual Lists

// Use svelte-virtual-list for large lists
<script>
  import VirtualList from 'svelte-virtual-list';
  
  let items = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `Item ${i}`
  }));
</script>

<VirtualList {items} let:item>
  <div class="item">
    {item.name}
  </div>
</VirtualList>

Code Splitting

<script>
  import { onMount } from 'svelte';
  
  let HeavyComponent;
  let showHeavy = false;
  
  async function loadHeavyComponent() {
    const module = await import('./HeavyComponent.svelte');
    HeavyComponent = module.default;
    showHeavy = true;
  }
</script>

<button on:click={loadHeavyComponent}>Load Heavy Component</button>

{#if showHeavy && HeavyComponent}
  <svelte:component this={HeavyComponent} />
{/if}