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;
}

Svelte vs SvelteKit：什么关系

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

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

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

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

生态系统概览

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 组件

本节回顾

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