Svelte 5 编译器路线：不送虚拟 DOM，直接改 DOM

它解决的是运行时体积和更新精度的问题

Svelte 的定位很直接：把组件编译成高效的 JavaScript，让浏览器在不加载虚拟 DOM 运行时的情况下完成页面更新。传统框架在浏览器里做 diff，Svelte 在编译期就确定了哪些 DOM 节点会被哪些状态影响，生成直接操作这些节点的代码。这样省掉了一整段运行时库的下载和解析成本，也避免了虚拟 DOM 对比的开销。它面向的是对首屏加载时间和交互响应敏感的应用开发者，尤其是那些把包体字节数当作硬指标的项目。

编译期生成代码，运行期没有框架

Svelte 的核心机制是编译。你写的是声明式组件，比如 <script> 里声明变量，模板里用 {} 绑定值。编译器分析这些绑定关系，生成对应的命令式 DOM 操作代码。README 里的描述是“surgically updates the DOM”，意思是更新只发生在需要改变的节点上。与 React 每次渲染都调用组件函数、生成新的虚拟树不同，Svelte 的组件在编译后就是一个普通的 JavaScript 模块，实例化时直接创建 DOM 元素，状态变化时调用编译好的更新函数。根据仓库布局，核心代码在 packages/svelte 目录下，编译器本身也是用 JavaScript 写的。

从安装到第一个组件的真实命令

Svelte 通过 npm 发布，当前主版本是 5.x。安装命令是 npm install svelte，或者用官方脚手架创建新项目，具体命令在 svelte.dev 网站上有说明。一个最小组件长这样：<script> let count = 0; </script> <button on:click={() => count++}> {count} </button>。保存为 .svelte 文件，然后通过打包器（如 Vite）处理。Svelte 5 引入了 runes 语法，用 $state 声明响应式变量：let count = $state(0)。这个写法在 5.57.0 版本中已经稳定，但如果你看旧教程，可能还是 $: 标签的写法，两者不兼容。编译器的配置项包括 generate（生成 client 还是 server 代码）、dev（开发模式）等，具体键值在官方文档里。

一个真实的限制：编译期静态分析的天花板

Svelte 的编译策略依赖静态分析。编译器必须在编译时知道哪些变量影响哪些 DOM 节点，所以动态的、运行期才能确定的组件结构会变得棘手。比如根据运行期数据动态拼接组件名，或者用任意字符串作为标签名，这类模式在 Svelte 里要么不支持，要么需要 <svelte:component> 这种显式转义。相比之下，React 的运行时渲染器可以处理任意动态结构，因为它在浏览器里做 diff。如果你需要高度动态的界面，比如一个完全由后端配置驱动的渲染引擎，Svelte 的编译模型会成为约束。这不是缺陷，而是设计取舍：换取体积和性能，就得放弃一部分运行时的灵活性。

和 React 的本质差异：编译期 vs 运行时

React 的组件在浏览器里执行，每次状态变化都调用组件函数，生成新的虚拟 DOM 树，然后与旧树对比，找出差异并更新真实 DOM。这个过程需要 react-dom 这个运行时库，它包含了协调器和 diff 算法。Svelte 没有这个运行时，它的编译器把组件变成直接操作 DOM 的代码，更新时只改那些被标记的节点。一个直观的对比：React 应用哪怕只有一个按钮，也要加载整个 react-dom；Svelte 应用编译后可能只有几 KB 的逻辑。代价是 Svelte 的编译器必须理解你的代码，而 React 的运行时可以处理任何 JavaScript 表达式。两者没有绝对优劣，取决于你的项目是追求最小包体还是最大动态性。

维护与升级成本：5.x 的迭代节奏和许可证

从仓库的发布记录看，Svelte 5 的迭代相当频繁，2026 年 8 月一个月内就有 5.56.9、5.56.10、5.57.0 三个版本。这意味着 bug 修复和新特性在持续进入，但也意味着升级时需要关注 changelog。Svelte 的 breaking change 通常集中在大版本，但 5.x 内部也有一些 API 调整，比如 runes 的细节。项目采用 MIT 许可证，允许商用和修改，但需要保留版权声明。对于企业用户，MIT 意味着你可以把它嵌入闭源产品，没有 copyleft 义务。维护成本方面，编译器本身的更新会直接影响所有组件代码，所以建议在 CI 里锁定版本，并定期测试升级。

谁该用，谁不该用，以及先验证什么

如果你的团队正在从零开始一个内容型网站、管理后台或者移动端 H5，Svelte 能显著减少 JavaScript 体积，提升加载速度。如果你已经有一个庞大的 React 或 Vue 代码库，迁移成本会很高，因为组件语法和响应式模型完全不同，除非你愿意重写。还有一个现实问题：Svelte 的第三方组件生态比 React 小，很多 UI 库没有官方 Svelte 版本，你可能需要自己封装。采用前先验证：用 Vite 创建一个小项目，跑一遍官方教程里的例子，确认你的团队能适应 runes 语法。然后检查你依赖的库是否有 Svelte 版本，或者是否能通过 wrapper 使用。最后，在真实设备上测试编译后的代码，确认它的性能收益在你的场景里真实存在，而不是纸面上的数字。

编辑结论

Svelte 适合那些把包体大小和运行时性能放在首位、并且愿意接受编译期约束的团队。它不适合需要完全动态组件结构、或者团队已经深度绑定 React 生态中间件的情况。采用前先验证三件事：你的构建链能否顺畅接入 Svelte 的编译器，现有组件库是否有对应的 Svelte 版本，以及团队是否熟悉响应式声明与 store 的写法。Svelte 5 的 runes 机制在 2026 年 8 月仍处于 5.57.0 的迭代中，API 细节可能继续调整，生产环境应锁定具体版本号。

官方来源

1. Official documentation
2. Official README
3. Project repository
4. Release notes