前端技术演化史

Svelte

Properties1
tags框架, svelte, 编译时, 无虚拟dom, runes

9分钟阅读

🧡 Svelte

一句话定性

Svelte 问了一个所有人都默认跳过的问题:“虚拟 DOM 真的有必要吗?” 它的答案是把框架的工作从运行时搬到编译时——你写的组件被编译成精准操作 DOM 的原生 JS,运行时几乎不带框架。它代表了前端范式钟摆从”运行时托管”荡向”编译时托管”的方向。

一、它是什么 & 出现的时代

2016 年,Rich Harris(《卫报》前端、Rollup 作者)发布 Svelte。它生于 2018-2023 工程化时代 前夜,核心理念颠覆性地简单:Svelte 不是运行时框架,而是一个编译器。

关键区别:框架运行在哪里

  • React/Vue:框架代码随你的应用一起下发到浏览器,在运行时做虚拟 DOM diff、调度更新。框架是”运行时的一部分”。
  • Svelte:框架代码主要在构建时(编译期)工作。它把 .svelte 组件编译成精准更新 DOM 的命令式 JS。浏览器里几乎不存在”Svelte 框架”——只有编译产物。
<script>
  let count = 0;
</script>
<!-- 编译后变成:直接定位这个文本节点并赋值,无 diff -->
<button on:click={() => count++}>{count}</button>

二、为什么会出现(解决上一代什么痛点)

对"虚拟 DOM 是银弹"的反思

React 用虚拟 DOM 解决了 AngularJS 脏检查的性能问题,虚拟 DOM 因此被奉为标配。但 Rich Harris 指出了一个被忽视的事实:虚拟 DOM 本身也有成本。

  1. 运行时开销:每次状态变化,要在内存里构建新的虚拟 DOM 树、和旧树做 diff、再算出最小更新——这些计算本身要消耗 CPU 和内存。“虚拟 DOM 很快”其实是”相对手动操作不算太慢”,不是”零成本”。
  2. 框架体积:虚拟 DOM 的 diff 引擎、调度器都要打包进 bundle 下发给用户。
  3. 本质浪费:编译时其实已经能看出模板里哪些部分会变(count 绑定到哪个节点),却非要等到运行时再去 diff 计算一遍——这是把编译期就能确定的事,推迟到了运行时。

Svelte 的洞察:既然编译时就知道哪里会变,为什么不直接生成”精准更新那个节点”的代码,彻底省掉运行时的 diff? 这呼应了 2013-2018 SPA时代 末期对虚拟 DOM 开销的整体反思。

三、核心创新 & 为什么流行(踩中什么时代红利)

  • 编译时框架(无虚拟 DOM):编译产物是直接操作 DOM 的命令式代码,运行时无 diff、无框架开销,bundle 极小。
  • 极少的样板代码:Svelte 3 用赋值即响应(count++ 就触发更新),配合 $: 声明响应式语句,代码量比 React/Vue 显著更少,可读性极高。
  • CSS 默认 scoped、动画/过渡内置:开发体验流畅。
  • 真正的”消失的框架”:作者的名言——“frameworks should disappear”。

它踩中的红利

Svelte 踩中了 2018-2023 工程化时代 对 bundle 体积、运行时性能、开发体验的集体焦虑。在性能跑分和”代码量最少”的对比里它常年名列前茅,口碑极佳(多年蝉联开发者满意度调查前列)。配合 SvelteKit(全栈元框架)补齐了路由/SSR 能力,以及同样追求极速的 Vite 生态。

四、带来的新问题 / 副作用

编译时路线的代价与争议

  1. “组件越多,产物未必越小”:Svelte 单组件产物极小,但每个组件都内联一份更新逻辑;当组件数量极大时,没有共享运行时反而可能让总体积反超有运行时的框架(运行时是固定开销,可摊薄)。这是对”无运行时一定更小”的重要反驳。
  2. 生态规模是硬短板:组件库、工具、招聘市场、第三方集成都远不及 React。企业选型时这是决定性劣势。
  3. “编译魔法”的透明度问题:Svelte 3 的 $: 响应式和”赋值即更新”很神奇,但响应式的边界不直观——比如响应式无法跨越函数边界、.svelte 文件外不可用,新手容易踩坑。这正是 Svelte 5 要修的问题。

五、为什么会衰落 / 现状(仍在用则讲演化)

Svelte 没有衰落,而是小而精地持续进化,并用 Svelte 5 解决了自己最大的隐患:

Svelte 5:runes —— 显式响应式

Svelte 3/4 的”赋值即响应”虽简洁,但响应式是编译器猜出来的隐式魔法,边界模糊、无法在组件外复用。Svelte 5 引入 runes(如 $state、$derived、$effect),用显式的函数式 API声明响应式:

  • 响应式变成显式、可预测的:let count = $state(0)。
  • 响应式逻辑可以跨文件、跨函数复用(摆脱了只能在 .svelte 顶层的限制)。
  • 这是向 Signals(信号) 范式的靠拢——和 Vue 的 ref、Angular 的 Signal、Solid 的 signal 殊途同归。

范式的趋同

一个深刻现象:Svelte 5(runes)、Vue 3(Composition API/ref)、Angular(Signals)、Solid(signals)正在向”细粒度响应式信号”收敛。这暗示着:在 React 的虚拟 DOM 路线之外,行业找到了另一条共识路径——编译时/信号驱动的细粒度更新。

六、对后续技术的影响(因果链)

React 虚拟 DOM 被奉为标配
        │
        ↓
Svelte(2016)反思:"虚拟 DOM 也有运行时开销,编译时就能知道哪里会变"
        │
        ↓
编译时框架 ──► 无虚拟 DOM、运行时几乎为零、bundle 极小、样板极少
        │
        ├─► 副作用:组件极多时体积可能反超、生态小、隐式响应式边界模糊
        │
        ├─► Svelte 5 引入 runes(显式信号) ──┐
        │                                    │
        │   Vue 3 ref / Angular Signals /    ├─► 全行业向"细粒度响应式信号"收敛
        │   Solid signals ───────────────────┘
        │
        └─► "编译时优化"成为新共识 ──► 影响整个工程化时代(配合 Vite)
                │
                ↓
        范式钟摆:手动 → 运行时托管 → 编译时托管,螺旋上升

历史地位

Svelte 的历史价值不在市场份额,而在它敢于质疑一个被全行业默认的前提(虚拟 DOM)。它证明了:框架做的很多运行时工作,其实可以在编译时完成。这个思想——加上由它带头、最终被 Vue/Angular/Solid 共同走向的”信号”收敛——很可能是后虚拟 DOM 时代的方向。它是第一性原理思考在前端框架领域的最佳范例。

🔗 相关:前端框架演进史 | React | Vue | Angular-2+ 🔗 工程化:Vite 🔗 时代:2018-2023 工程化时代 | 2023-未来 AI时代 🔗 深度:AI编程会让前端框架收敛吗

关系图谱

反向链接