Svelte 5：从基础到部署的快速指南

Source: Dev.to

根据 The State of JavaScript 2024 调查，Svelte 的采纳率自 2020 年起稳步增长，受到开发者社区的越来越多关注。虽然 React 和 Vue 仍是主流选择，Svelte 正在从小众走向主流，成为前端生态系统中的重要力量。

如果你还没有尝试过 Svelte，本文将快速概览其核心概念、优势以及入门方法。

什么是 Svelte？它与 React/Vue 有何不同？

Svelte 是用于构建用户界面的前端组件框架，和 React、Vue 类似。根本的区别在于 Svelte 是编译时框架，而 React 和 Vue 是 运行时框架。

运行时 vs 编译时

• React/Vue – 你编写“配方”，框架在用户浏览器中“烹饪”（虚拟 DOM diff 等）。
• Svelte – 菜已经在你的机器上烹好，用户直接得到“成品”。Svelte 在构建阶段将组件编译成高效的原生 JavaScript，最终包中不包含 Svelte 运行时。

对比

优势与适用场景

优势

1. 更小的包体积
   没有运行时意味着更小的包体积。一个简单的 Svelte 应用可能只有几 KB，而等价的 React 应用仅框架本身就需要 40 KB+。

2. 更好的性能
   没有虚拟 DOM diff 的开销，Svelte 直接操作真实 DOM。在大量节点更新的场景下，Svelte 通常比 React/Vue 更快。

3. 简洁的语法

   let count = $state(0);
   <button on:click={() => count++}>
     Clicked {count} times
   </button>

   没有 useState，没有 ref。HTML、CSS 与 JS 都写在同一个 .svelte 文件中，结构清晰。

4. 学习曲线低
   只要熟悉 HTML、CSS 和 JavaScript，就能快速上手 Svelte。没有 JSX 的思维负担，也不需要记住 “hooks 不能在条件语句内部” 之类的规则。

适合的使用场景

• 个人项目 / 小型应用 – 开发速度快，代码更少。
• 对性能和体积敏感的场景 – 嵌入式小部件、移动 H5、低带宽环境。
• 想尝试新技术的团队 – Svelte 的开发体验确实非常好。
• 静态网站 / 博客 – 配合 SvelteKit，轻松生成静态站点。

不太理想的场景

• 已经在 React/Vue 上深度投入、依赖大量生态系统的团队。
• 需要大量第三方组件库的项目（Svelte 生态仍然比 React 小）。

Svelte 5：Runes 让响应式更直观

Svelte 5 于 2024 年 10 月正式发布。最大变化是引入 Runes 系统，使响应式状态声明变得显式。

旧的 “隐式魔法”

let count = 0;           // 自动变为响应式
$: doubled = count * 2;  // 自动追踪依赖

$: 语法可能让人困惑，也不容易看出哪些变量是响应式的。

Svelte 5 的显式声明

let count = $state(0);               // 响应式状态
let doubled = $derived(count * 2);   // 派生值

<button on:click={() => count++}>
  {count} × 2 = {doubled}
</button>

• $state() → 响应式变量
• $derived() → 计算值（类似 Vue 的 computed）

常用 Runes

为什么更适合初学者

• 不再猜测 – $state 明确标记响应式变量。
• 语法统一 – 同样的声明方式可以在顶层或函数内部使用。
• 更易调试 – 一眼就能看出是哪块状态导致了问题。

如果你使用过 React Hooks 或 Vue 3 的 Composition API，Runes 会感觉熟悉，但语法更简洁，规则更少。

SvelteKit 概览

如果说 Svelte 用于编写组件，SvelteKit 则用于构建完整的应用。它与 Svelte 的关系类似于 Next.js ↔ React 或 Nuxt ↔ Vue。

SvelteKit 提供了什么？

1. 基于文件的路由
   在 src/routes 下创建文件夹和文件，路由会自动生成。

   src/routes/
   ├── +page.svelte          → /
   ├── about/
   │   └── +page.svelte      → /about
   └── blog/
       └── [slug]/
           └── +page.svelte → /blog/:slug

2. 多种渲染模式

   • SSR – 服务器端渲染（对 SEO 友好）。
   • CSR – 客户端渲染（纯前端）。
   • SSG – 静态站点生成（构建时生成 HTML）。
   • Hybrid – 不同页面可以使用不同策略。

3. 数据加载
   每个路由可以拥有 +page.js（或 +page.server.js）在渲染前加载数据。

   // src/routes/blog/+page.server.js
   export async function load() {
     const posts = await db.getPosts();
     return { posts };
   }

   <script>
     let { data } = $props();
   </script>
   
   {#each data.posts as post}
     <h2>{post.title}</h2>
   {/each}

4. 适配器
   SvelteKit 通过切换适配器可以部署到各种平台，使同一代码库能够运行在 Vercel、Netlify、Cloudflare Workers、Node.js 等多种环境。