Performance Optimization in Svelte

React/Vue:            Svelte:
1. setState()         1. count = count + 1
2. Create new vDOM    2. ← (nothing)
3. Diff old vs new    3. ← (nothing)
4. Reconcile          4. ← (nothing)
5. Update DOM         5. Update DOM directly (targeted)

Svelte skips steps 2-4 entirely!

<!-- Dynamically import heavy components only when needed -->
<script>
  let HeavyChart;
  let showChart = false;

  async function loadChart() {
    if (!HeavyChart) {
      const module = await import(&#039;./HeavyChart.svelte');
      HeavyChart = module.default;
    }
    showChart = true;
  }
</script>

<button on:click={loadChart}>Show Analytics Chart</button>

{#if showChart && HeavyChart}
  <svelte:component this={HeavyChart} />
{:else if showChart}
  <p>Loading chart...</p>
{/if}

// Each route is automatically a separate bundle
// /src/routes/heavy-feature/+page.svelte → loaded ONLY when visited
// Initial bundle only contains the home page code

<script>
  // ❌ BAD: Reactive block runs on every keystroke if 'name' changes
  let name = &#039;';
  $: {
    expensiveOperation(name); // Runs on every letter typed!
  }

  // ✅ GOOD: Debounce the expensive operation
  let timer;
  $: {
    clearTimeout(timer);
    timer = setTimeout(() => expensiveOperation(name), 300);
  }

  // ✅ BETTER: Only run when the final name is set
  let submittedName = &#039;';
  function handleSubmit() { expensiveOperation(submittedName); }
</script>

<!-- ❌ No key: Svelte reuses DOM nodes by position — wrong with add/remove -->
{#each items as item}
  <ItemComponent {item} />
{/each}

<!-- ✅ With key: Svelte reuses DOM nodes by identity — correct always -->
{#each items as item (item.id)}
  <ItemComponent {item} />
{/each}

// ❌ BAD: One giant store — EVERY component re-renders when ANY field changes
const appStore = writable({ user, products, cart, theme, notifications });

// ✅ GOOD: Split into focused stores — components only re-render when their slice changes
export const userStore = writable(null);
export const cartStore = writable([]);
export const themeStore = writable('light');
export const notificationStore = writable([]);

<script>
  import { onMount } from &#039;svelte';

  let items = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }));
  let containerHeight = 500;
  let itemHeight = 40;
  let scrollTop = 0;

  $: startIndex = Math.floor(scrollTop / itemHeight);
  $: visibleCount = Math.ceil(containerHeight / itemHeight) + 1;
  $: visibleItems = items.slice(startIndex, startIndex + visibleCount);
  $: totalHeight = items.length * itemHeight;
  $: offsetY = startIndex * itemHeight;

  function handleScroll(e) {
    scrollTop = e.target.scrollTop;
  }
</script>

<div
  class="scroll-container"
  style="height:{containerHeight}px; overflow-y:auto;"
  on:scroll={handleScroll}
>
  <!-- Spacer for total scrollable height -->
  <div style="height:{totalHeight}px; position:relative;">
    <!-- Only render visible items -->
    <div style="transform:translateY({offsetY}px)">
      {#each visibleItems as item (item.id)}
        <div class="item" style="height:{itemHeight}px;">
          {item.name}
        </div>
      {/each}
    </div>
  </div>
</div>

# Production build — tree-shaking + minification + SSR
npm run build

# Analyze bundle size
npx vite-bundle-visualizer

# Preload critical resources in SvelteKit
# src/routes/+layout.svelte

<svelte:head>
  <link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin />
</svelte:head>