1. Svelte 简介与生态

本节目标：搞清楚 Svelte 到底是什么、它为什么用编译器而不是虚拟 DOM，以及 Svelte 和 SvelteKit 的关系。学完你能用一句话向别人解释 Svelte。

Svelte 是什么

Svelte 是一个构建 Web 用户界面的框架。你用 HTML、CSS 和 JavaScript 写组件，Svelte 的编译器会把它们转换成高度优化的 JavaScript 代码。

先看一个最简单的 Svelte 组件长什么样：

<script>
	function greet() {
		alert('Welcome to Svelte!');
	}
</script>

<button onclick={greet}>click me</button>

<style>
	button {
		font-size: 2em;
	}
</style>

这段代码就是 Svelte 的全部外观——<script> 写逻辑，中间写 HTML 模板，<style> 写样式，三段式结构一气呵成。

Svelte 可以用来做很多东西：从单个独立组件，到完整的全栈应用（搭配 SvelteKit），都在它的能力范围内。

编译器思路：编译时 vs 运行时

大多数前端框架（React、Vue 等）都依赖虚拟 DOM。每次状态变化，框架会生成一棵新的虚拟 DOM 树，然后和旧的做对比（这个过程叫 diff），最后把差异更新到真实 DOM 上。

虚拟 DOM 方案有个问题——diff 本身就是额外开销。大多数时候，页面的结构根本没变，只有某个文本或属性变了，但框架还是要遍历整棵树去做对比。

Svelte 走了另一条路：编译时优化。

打个比方，虚拟 DOM 像是你每次出门前都把整个衣柜翻一遍来搭配衣服。而 Svelte 更像是你提前计划好了每套搭配，出门时直接穿，不用再翻。

Svelte 的编译器在构建时就分析你的组件，精确知道哪些地方可能变化。最终生成的代码只包含必要的更新逻辑，没有运行时 diff。

// Svelte 编译后生成的更新代码（简化版）
if (changed.name) {
	text.data = name;
}

Note

虚拟 DOM 并不是”功能”，而是实现声明式 UI 的一种手段。Svelte 用编译器达到了同样的编程体验，却不需要运行时的 diff 开销。

Svelte vs SvelteKit：什么关系

很多人分不清 Svelte 和 SvelteKit，这里用一张表说清楚：

对比项	Svelte	SvelteKit
定位	UI 组件框架	全栈应用框架
职责	渲染组件、管理状态	路由、SSR、数据加载、部署
类比	相当于 React	相当于 Next.js
能否单独用	能	不能（依赖 Svelte）

简单说，Svelte 负责画界面，SvelteKit 负责把界面组织成完整应用。

你可以只用 Svelte 做一个独立的组件或单页应用。但如果你要做完整的项目——有路由、有服务端渲染、有数据接口——那就用 SvelteKit。SvelteKit 是 Svelte 官方团队维护的应用框架，基于 Vite 构建，提供开发服务器、热更新、构建打包等一整套工具链。

Tip

如果你刚接触 Svelte，不用急着理解 SvelteKit 的所有功能。先学 Svelte 的组件语法，后面再叠加 SvelteKit 的能力就行。

生态系统概览

Svelte 的生态围绕几个核心部分展开：

sv CLI：官方脚手架工具，用 npx sv create 创建项目，用 npx sv add 添加功能模块（如 Tailwind CSS、ESLint、Drizzle ORM 等）
SvelteKit：应用框架，提供路由、SSR/SSG/SPA 多种渲染模式、适配器部署方案
svelte-package：组件库打包工具，方便你把组件发布成 npm 包
VS Code 插件：官方维护的语言支持插件，提供语法高亮、类型检查、自动补全
社区生态：Svelte Society 维护的组件库集合、模板、教程资源

SvelteKit 支持的部署方式非常灵活：

项目类型	说明	适配器
SSR 应用	默认模式，首屏服务端渲染	adapter-auto / adapter-node
静态站点	构建时预渲染所有页面	adapter-static
单页应用	纯客户端渲染	adapter-static (SPA 模式)
Serverless	部署到 Vercel / Netlify / Cloudflare	对应平台适配器
桌面应用	搭配 Tauri / Electron	adapter-static
移动应用	搭配 Tauri / Capacitor	adapter-static

Svelte 适合做什么

因为编译后产物体积小、运行时开销低，Svelte 在这些场景下特别有优势：

内容型网站：博客、文档站、营销页（搭配 SvelteKit 的 SSG 模式）
交互型 Web 应用：后台管理系统、数据看板、在线工具
嵌入式设备界面：智能电视、机顶盒等低性能设备上的 Web UI
组件库：编译成独立模块，体积小，不依赖运行时框架
渐进式增强：可以在现有项目中逐步引入 Svelte 组件

Note

SvelteKit 默认采用 SSR + CSR 混合渲染：首屏服务端渲染（利于 SEO 和首屏速度），后续导航走客户端渲染（体验流畅）。你也可以按页面单独配置渲染模式。

本节回顾

Svelte 是编译型 UI 框架，构建时生成精确的更新代码，不做运行时 diff
Svelte 负责组件，SvelteKit 负责应用框架（路由、SSR、部署）
生态核心是 sv CLI + SvelteKit + svelte-package + VS Code 插件
适合做内容站、交互应用、组件库、嵌入式界面等