We Moved from React to Svelte 5 and Cut Our Bundle by 60%

This isn't a "React vs. Svelte" hot take. It's an engineering post-mortem on migrating a B2B component library from React 19 to Svelte 5, the measurable outcomes, and the honest trade-offs.

Result: 60%+ bundle reduction, 400ms faster First Contentful Paint, and a team that shipped features faster. But it wasn't free.

The Core Architectural Difference

React and Svelte solve the same problem — keeping the DOM in sync with state — through fundamentally different mechanisms.

React ships a runtime to the browser that diffs a Virtual DOM on every state change, then patches the real DOM.

Svelte runs at build time. The compiler analyzes your components and generates minimal, imperative JavaScript that surgically updates only the exact DOM nodes that changed. No Virtual DOM. No runtime diffing. No reconciliation overhead.

Svelte 5's Runes: Reactivity Done Right

Svelte 5 replaced its implicit reactivity system with Runes — explicit, fine-grained reactive primitives. This is the equivalent of React's hooks, but evaluated at compile time instead of runtime.

<script>
  // Svelte 5 Runes
  let count = $state(0);
  let doubled = $derived(count * 2);

  function increment() {
    count++;  // Direct mutation — compiler tracks it
  }
</script>

<button onclick={increment}>
  {count} × 2 = {doubled}
</button>

Compare with the React equivalent:

// React 19
function Counter() {
  const [count, setCount] = useState(0);
  const doubled = useMemo(() => count * 2, [count]);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count} × 2 = {doubled}
    </button>
  );
}

React 19's compiler automates useMemo and useCallback — a huge DX improvement. But it's optimizing around the Virtual DOM. Svelte eliminates the need for memoization entirely because the compiler knows at build time exactly which DOM node depends on which variable.

The Numbers

After migrating 47 components from our B2B UI library:

The bundle savings compound in real usage. A dashboard loading 15 components simultaneously saw its JS parse time drop from 340ms to 90ms on a mid-range mobile device.

Where React Still Wins

This is the part most "Svelte is better" articles skip. Here's what made the migration harder than expected:

1. Ecosystem Depth

React has 450K+ npm packages and 45K+ job postings. Svelte has ~35K packages and ~3K postings. When we needed an accessible date range picker with timezone support, React had 12 production-ready options. Svelte had 2, and one was abandoned.

2. Hiring Velocity

We interviewed 40 frontend candidates. 38 knew React. 6 knew Svelte. Training time was ~2 weeks for experienced React devs to become productive in Svelte, but it's still a real cost.

3. Third-Party Integrations

Several enterprise tools (analytics SDKs, A/B testing platforms, design system bridges) only ship React wrappers. We had to write Svelte adapters for 3 of them.

When to Choose Svelte 5

Svelte isn't a universal React replacement. It's the right choice in specific scenarios:

Choose Svelte when:

• Bundle size directly impacts revenue (mobile-first, emerging markets, embedded widgets)
• You're building a performance-critical component library
• Your team is small enough to absorb the ecosystem gaps
• You're starting greenfield, not migrating a massive existing codebase

Stay with React when:

• Hiring speed matters more than bundle size
• You need deep third-party integrations (enterprise SaaS tooling)
• Your existing codebase is 100K+ lines of React
• Your team is larger than ~15 frontend engineers

The Decision Framework

The migration was worth it for us because our use case hit the sweet spot: a self-contained component library used in latency-sensitive embedded contexts where every kilobyte of JS matters. We weren't rewriting a 500-page SaaS app.

If (bundle_size_impacts_revenue AND team_size < 15):
    → Svelte 5 will likely pay off
    
If (hiring_velocity > performance AND ecosystem_depth_matters):
    → React 19 with compiler is the pragmatic choice
    
If (embedded_widget OR mobile_first OR low_bandwidth):
    → Svelte 5 is almost certainly the right call

The Takeaway

Svelte 5 is the most technically impressive frontend framework available today. Its compiler-first architecture produces objectively smaller, faster output than any Virtual DOM framework can achieve. React 19's compiler is a massive improvement, but it's optimizing around an inherent architectural overhead.

The choice isn't about which is "better." It's about which trade-offs align with your specific constraints. For us, 60% less JavaScript was worth every adapter we had to write.

Considering a framework migration or optimizing frontend performance? Happy to share more details — hello@sowmith.dev