Svelte 5 Runes: Cuộc Cách Mạng Về Reactivity & Tối Ưu Hiệu Năng Frontend

Trong hơn một thập kỷ qua, Virtual DOM đã là trái tim của cuộc cách mạng Single Page Application (SPA). Tuy nhiên, cái giá phải trả về bộ nhớ runtime, độ trễ reconcilation và điểm số Core Web Vitals đã mở đường cho một kỷ nguyên kiến trúc mới: Svelte 5 Runes — hệ thống reactivity mịn (fine-grained) dựa trên tín hiệu trực tiếp, giải phóng hoàn toàn gánh nặng Virtual DOM.

1. Sự tiến hóa của Reactivity: Tại sao lại là Runes? #

Ở phiên bản Svelte 3 và 4, reactivity dựa vào cú pháp gán biến đơn giản let count = 0 và nhãn JavaScript $: doubled = count * 2. Mặc dù cực kỳ trực quan, cơ chế này gặp phải hạn chế lớn: nó chỉ hoạt động bên trong file component .svelte và bị giới hạn phạm vi ranh giới tệp.

Với Svelte 5 Runes, tính phản ứng trở thành công dân hạng nhất (First-class citizen) xuyên suốt toàn bộ codebase:

<script lang="ts">
  // Khai báo state phản ứng hạt mịn với Svelte 5 Runes
  let count = $state(0);
  let doubled = $derived(count * 2);
  let status = $derived(count % 2 === 0 ? "Số chẵn" : "Số lẻ");

  // Tự động theo dõi các biến state được sử dụng bên trong
  $effect(() => {
    console.log(`[Metric Tracker] Giá trị mới: ${count} (${status})`);
  });

  function increment() {
    count += 1;
  }
</script>

<div class="counter-card p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800">
  <p class="text-lg font-bold">Số lượng: {count} — Gấp đôi: {doubled}</p>
  <button  class="px-5 py-2.5 rounded-full bg-neutral-950 text-white font-semibold">
    Tăng số lượng
  </button>
</div>

2. Không Virtual DOM: Bí quyết đạt 100 điểm Lighthouse #

Virtual DOM vốn là một giải pháp tình thế thông minh: giữ một bản sao cây DOM trong bộ nhớ JavaScript, so sánh sự khác biệt (diffing) sau mỗi lần state thay đổi, rồi cập nhật DOM thật. Nhưng khi ứng dụng phát triển với hàng nghìn nodes:

1. Bộ nhớ RAM tăng vọt: Chi phí khởi tạo và duy trì hàng nghìn VNode objects.
2. CPU Garbage Collection bị nghẽn: Việc liên tục tạo và hủy Virtual DOM objects khiến trình duyệt thường xuyên bị drop frames khi cuộn trang.

3. So sánh thực chiến: Svelte 5 vs Next.js vs Vue #

Khi xây dựng các website doanh nghiệp và cổng thông tin tại ChillCode Studio, việc chuyển từ React sang Svelte 5 giúp giảm thời gian tải trang ban đầu (First Contentful Paint) từ 1.8 giây xuống còn dưới 0.35 giây.