Svelte 5:杀死虚拟DOM的编译器,如何永久改变Web开发

GitHub July 2026
⭐ 87487📈 +87487
来源:GitHub归档:July 2026
拥有87,487颗GitHub星标的编译器驱动框架Svelte,正在挑战虚拟DOM的正统地位。AINews深度剖析其编译时方案如何带来更小的打包体积、更快的运行时性能,以及彻底简化的开发者体验——同时揭示它距离撼动React王座还缺少什么。

Svelte由Rich Harris创建,现由Vercel生态系统维护,已从一个小众实验成长为前端框架领域的有力竞争者。其核心创新——将工作从运行时转移到编译时——彻底消除了虚拟DOM,使得应用在打包体积上通常比等效的React应用小2-3倍,运行时性能也更快。最新发布的Svelte 5引入了runes,这是一种统一的响应式原语,取代了旧的`$:`语法,使响应式更加明确和可预测。尽管技术优雅,Svelte的生态系统仍小于React或Vue,缺乏生产级的组件库、状态管理方案和工具集成。然而,它在高性能场景中的采用正在增长——

技术深度解析

Svelte的架构代表了与React和Vue所普及的响应式编程模型的根本性背离。它不是提供一个在运行时解释组件逻辑的运行时库,而是作为一个编译器,在构建步骤中将声明式组件代码转换为高度优化的命令式JavaScript。这种编译时方案带来了几个具体优势:

无虚拟DOM开销。 React和Vue在内存中维护UI的表示(虚拟DOM),并在每次状态变化时将其与真实DOM进行差异对比。Svelte完全跳过了这一步。编译器分析模板的哪些部分引用了哪些变量,并生成直接的DOM操作代码。当`count`变化时,只有显示`count`的特定文本节点被更新——而不是一个子树,也不是一个虚拟树。这完全消除了差异对比的成本。

通过Runes实现响应式(Svelte 5)。 旧的Svelte语法依赖`$:`来标记响应式语句,这虽然优雅但有时令人困惑——编译器必须猜测依赖关系。Svelte 5引入了runes:`$state`、`$derived`、`$effect`。这些是编译器能识别的显式信号。`let count = $state(0)`创建一个响应式变量;`let doubled = $derived(count * 2)`创建一个派生值;`$effect(() => { ... })`在依赖关系变化时运行副作用。这在概念上类似于SolidJS的信号或Vue的`ref()`,但它是编译时内置于语言中,而不是运行时代理。

打包体积。 由于Svelte将框架编译掉,简单组件的运行时占用几乎为零。一个最小的Svelte应用可以压缩到3KB以下。相比之下,React + ReactDOM(压缩后约40KB)或Vue(压缩后约20KB)。对于包含许多组件的复杂应用,Svelte仍然胜出,因为每个组件都编译为独立代码,没有共享的运行时开销。

基准测试数据:

| 框架 | TodoMVC打包体积 (gzip) | 可交互时间 (TTI) | 内存占用 (MB) |
|---|---|---|---|
| Svelte 5 | 2.8 KB | 0.9s | 4.2 |
| React 18 | 42.1 KB | 1.8s | 8.7 |
| Vue 3 | 18.3 KB | 1.3s | 6.1 |
| SolidJS | 3.1 KB | 0.8s | 4.0 |

*数据要点:Svelte的打包体积优势是React的15倍,Vue的6.5倍。这直接转化为在慢速网络上的更快加载时间和移动设备上的更低内存消耗。*

相关GitHub仓库:
- sveltejs/svelte(87,487星标):核心编译器和运行时。最近的提交显示在Svelte 5 runes、TypeScript支持改进以及服务端渲染的水合方面有大量工作。
- sveltejs/kit(19,000+星标):官方应用框架,类似于React的Next.js。提供基于文件的路由、SSR、静态站点生成以及用于部署的适配器系统。
- Rich-Harris/svelte-cubed(1,200+星标):一个用于Three.js的Svelte封装,展示了编译器模型如何与命令式3D图形良好配合。

编辑判断: Svelte的编译时方法不仅仅是一种性能优化——它是一种根本不同的编程模型,与Web平台的实际工作方式相一致。通过生成直接操作DOM的原生JavaScript,Svelte应用开箱即用更加可预测、可调试且性能卓越。然而,这以运行时动态性为代价:如果没有显式的编译器提示,你无法在运行时动态创建新的响应式变量(例如,从JSON响应中)。这种权衡对于大多数应用来说是可以接受的,但对于高度动态的数据可视化或低代码平台来说可能是一个限制。

关键人物与案例研究

创建者:Rich Harris。 曾任《纽约时报》图形编辑,现为Vercel核心开发者。Harris出于对现有框架复杂性的沮丧而创建了Svelte。他在数据新闻领域的背景——他曾构建必须在慢速新闻网站上即时加载的交互式图形——直接影响了Svelte性能优先的理念。Harris也是Rollup的创建者,这个打包器为许多Svelte项目提供支持。他于2021年加入Vercel,标志着一种战略对齐:同样拥有Next.js的Vercel将Svelte视为性能关键型前端的补充工具。

案例研究:《纽约时报》。 《纽约时报》将Svelte用于交互式图形和数据可视化。他们的图形团队——其中包括Harris的前同事——采用Svelte是因为它允许他们创建复杂、动画化的图表,即使在网络连接不佳的移动设备上也能快速加载。一个显著的例子是他们2020年的选举结果追踪器,该追踪器处理了数十个摇摆州的实时数据更新,且没有卡顿。选择Svelte而非React是由打包体积驱动的:交互式地图不到10KB,而等效的React版本将超过50KB。

案例研究:Apple。 Apple的Music网页界面(music.apple.com)在其部分前端使用了Svelte。该决定

更多来自 GitHub

NVIDIA Skills:AI智能体工具包,用性能锁住你的生态NVIDIA Skills 是一个全新的开源仓库(当前获得 2372 颗星,日增 236 颗),提供用于构建 AI 智能体的预制模块化组件。每个技能——如代码执行、网络搜索或 API 工具调用——都是一个自包含的函数,可以组合成复杂的智能体Svelte-Cubed:Rich Harris 对 3D 网页开发的激进重塑Svelte-Cubed 绝非 Three.js 的又一个封装层,它是对网页 3D 场景创作方式的根本性重构。该库利用 Svelte 编译时响应机制,将 Three.js 命令式、状态繁重的 API 转化为声明式、组件驱动的体验。开发者可直Gemmini:伯克利开源AI加速器,正在重塑定制芯片设计格局Gemmini 由 Berkeley Architecture Research 团队开发,绝非又一个学术项目——它是开源硬件运动的战略助推器。其核心是一个参数化的脉动阵列生成器,可针对不同数据类型(INT8、FP16、FP32)、阵列尺寸查看来源专题页GitHub 已收录 3360 篇文章

时间归档

July 2026605 篇已发布文章

延伸阅读

Svelte-Cubed:Rich Harris 对 3D 网页开发的激进重塑Svelte 之父 Rich Harris 发布了 Svelte-Cubed,一个将 Svelte 声明式响应能力与 Three.js 原生 3D 威力深度融合的库。这一结合有望通过消除样板代码、实现基于组件的 3D 场景构建,让 WebGSquare UI:开源UI工具包,重新定义快速网页原型开发Square UI 作为一个脱颖而出的开源项目,提供了一套基于 shadcn/ui 和 Tailwind CSS 精心设计的 UI 布局集合。凭借超过 5400 个 GitHub Star 和迅猛的日增长,它承诺加速从原型到生产的现代 WeTypeScript 星标破 10.8 万:微软超集如何铸就现代 Web 开发的不可撼动基石TypeScript 在 GitHub 上已斩获 108,920 颗星标,牢牢锁定其作为现代 Web 开发最核心工具的地位。本篇深度分析将拆解微软静态类型系统如何重塑从前端框架到后端服务的整个生态,并展望类型安全 JavaScript 的下重塑开发者工作流的SVG图标库:thesvg深度解析一个名为thesvg的开源新项目正迅速崛起,提供超过5,880个品牌SVG图标,支持tree-shaking和完整的TypeScript支持。凭借单日近2,000颗GitHub星标,它在性能和开发者体验上向传统图标库发起了挑战。

常见问题

GitHub 热点“Svelte 5: The Compiler That Killed Virtual DOM and Changed Web Development Forever”主要讲了什么?

Svelte, created by Rich Harris and now stewarded by the Vercel ecosystem, has grown from a niche experiment into a serious contender in the frontend framework landscape. Its core i…

这个 GitHub 项目在“svelte vs react bundle size comparison 2025”上为什么会引发关注?

Svelte's architecture represents a fundamental departure from the reactive programming model popularized by React and Vue. Instead of shipping a runtime library that interprets component logic at runtime, Svelte acts as…

从“svelte 5 runes migration guide”看,这个 GitHub 项目的热度表现如何?

当前相关 GitHub 项目总星标约为 87487,近一日增长约为 87487,这说明它在开源社区具有较强讨论度和扩散能力。