Svelte简介 #

一、什么是Svelte #

Svelte 是一种构建用户界面的编译时框架。与 React、Vue 等传统框架不同，Svelte 在构建时将组件编译为高效的命令式 JavaScript 代码，而不是在浏览器中运行时解释代码。

1.1 核心定位 #

text

Svelte = 编译时框架 + 原生DOM操作

Svelte 的核心思想：

编译时：在构建阶段完成框架工作，生成原生代码
无虚拟DOM：直接操作真实 DOM，减少开销
响应式：内置响应式系统，无需额外 API
极小体积：运行时代码极小，性能卓越

1.2 核心特点 #

特点	说明
编译时框架	构建时转换，无运行时开销
无虚拟DOM	直接操作 DOM，更高效
真正的响应式	自动追踪依赖，无需手动管理
极小体积	编译后代码量极小
学习曲线低	语法简洁，接近原生开发
单文件组件	HTML、CSS、JS 封装在一个文件

二、编译时原理 #

2.1 传统框架 vs Svelte #

text

┌─────────────────────────────────────────────────────────────┐
│                    传统框架（React/Vue）                      │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   开发时              构建时              运行时             │
│   ┌─────┐            ┌─────┐            ┌─────┐            │
│   │组件 │ ─────────→ │打包 │ ─────────→ │框架 │            │
│   └─────┘            └─────┘            │运行时│            │
│                                         │虚拟DOM│           │
│                                         │Diff  │            │
│                                         └─────┘            │
│                                         (浏览器执行)         │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                         Svelte                               │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   开发时              编译时              运行时             │
│   ┌─────┐            ┌─────┐            ┌─────┐            │
│   │组件 │ ─────────→ │编译 │ ─────────→ │原生 │            │
│   └─────┘            │优化 │            │JS   │            │
│                      └─────┘            └─────┘            │
│                      (构建时完成)         (浏览器执行)        │
└─────────────────────────────────────────────────────────────┘

2.2 编译过程示例 #

Svelte 组件源码：

svelte

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

<button on:click={increment}>
  Clicked {count} times
</button>

编译后的 JavaScript（简化版）：

javascript

function create_fragment(ctx) {
  let button;
  let t0;
  let t1_value = ctx[0] + "";
  let t1;
  let mounted;
  let dispose;

  return {
    c() {
      button = element("button");
      t0 = text("Clicked ");
      t1 = text(t1_value);
      t2 = text(" times");
    },
    m(target, anchor) {
      insert(target, button, anchor);
      append(button, t0);
      append(button, t1);
      append(button, t2);
      
      if (!mounted) {
        dispose = listen(button, "click", increment);
        mounted = true;
      }
    },
    p(ctx, [dirty]) {
      if (dirty & 1 && t1_value !== (t1_value = ctx[0] + "")) {
        set_data(t1, t1_value);
      }
    }
  };
}

三、Svelte 5 新特性：Runes #

3.1 什么是 Runes #

Svelte 5 引入了 Runes（符文），这是一种全新的响应式语法，使用 $ 前缀的函数来声明响应式状态。

svelte

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
  
  function increment() {
    count += 1;
  }
</script>

<button onclick={increment}>
  Count: {count}, Doubled: {doubled}
</button>

3.2 核心 Runes #

Rune	用途
`$state`	声明响应式状态
`$derived`	声明派生状态
`$effect`	声明副作用
`$props`	声明组件属性
`$bindable`	声明可双向绑定的属性

3.3 Runes 示例 #

svelte

<script>
  let { name = 'World' } = $props();
  
  let count = $state(0);
  let doubled = $derived(count * 2);
  
  $effect(() => {
    console.log(`Count changed to ${count}`);
  });
</script>

<h1>Hello {name}!</h1>
<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button onclick={() => count++}>Increment</button>

四、与传统框架对比 #

4.1 Svelte vs React #

方面	Svelte	React
运行方式	编译时	运行时
虚拟DOM	无	有
包体积	~2KB	~42KB
响应式	内置	需要useState等
学习曲线	简单	中等
生态成熟度	发展中	成熟

4.2 Svelte vs Vue #

方面	Svelte	Vue
模板语法	类HTML	HTML模板
响应式	编译时追踪	Proxy代理
包体积	~2KB	~33KB
状态管理	内置Store	Pinia/Vuex
单文件组件	.svelte	.vue
构建工具	Vite/Rollup	Vite/Webpack

4.3 性能对比 #

text

基准测试（越小越好）

JS Bundle Size (gzip)
├── Svelte:     1.6KB  ████
├── Vue 3:      33KB   ████████████████████████████████████████
└── React:      42KB   ████████████████████████████████████████████████████

Lighthouse Performance Score
├── Svelte:     98分   ████████████████████████████████████████████████████
├── Vue 3:      92分   █████████████████████████████████████████████████
└── React:      89分   ███████████████████████████████████████████████

五、应用场景 #

5.1 适合场景 #

text

✅ 推荐使用 Svelte
├── 中小型Web应用
├── 嵌入式组件（如小部件）
├── 性能敏感项目
├── 快速原型开发
├── 渐进式增强
└── 学习成本敏感项目

5.2 SvelteKit 全栈应用 #

SvelteKit 是 Svelte 的官方全栈框架：

text

SvelteKit 特性
├── 文件系统路由
├── 服务端渲染（SSR）
├── 静态站点生成（SSG）
├── API 路由
├── TypeScript 支持
└── 零配置部署

5.3 实际案例 #

text

知名使用案例
├── Apple 部分页面
├── The New York Times
├── Spotify 部分功能
├── Razorpay
└── 1Password

六、技术栈概览 #

6.1 核心技术栈 #

text

┌──────────────────────────────────────┐
│            Svelte 5                  │
├──────────────────────────────────────┤
│  SvelteKit     │    Svelte Store    │
│  (全栈框架)    │    (状态管理)       │
├──────────────────────────────────────┤
│  Vite          │    Playwright      │
│  (构建工具)    │    (测试框架)       │
└──────────────────────────────────────┘

6.2 开发工具 #

VS Code 插件：Svelte for VS Code
浏览器扩展：Svelte DevTools
构建工具：Vite（推荐）
测试工具：Vitest + Playwright

七、学习路线 #

text

基础阶段
├── Svelte组件结构
├── 响应式声明
├── 模板语法
└── 事件处理

进阶阶段
├── 组件通信
├── Store状态管理
├── 动画与过渡
└── 插槽

高级阶段
├── SvelteKit
├── 服务端渲染
├── TypeScript集成
└── 性能优化

八、总结 #

Svelte 的核心优势：

编译时优化：无运行时开销，性能卓越
极小体积：编译后代码量极小
简洁语法：学习曲线平缓
真正响应式：自动依赖追踪
开发体验：单文件组件，样式封装

选择 Svelte 的理由：

追求极致性能和包体积
希望快速学习和开发
构建中小型应用
对编译时优化感兴趣
喜欢简洁的代码风格