svelte 是一个构建时编译器，将 .svelte 文件编译为无框架依赖的原生 js 代码，直接操作 dom；它不依赖运行时、无虚拟 dom、无响应式系统开销，响应式逻辑在编译期静态分析并转为显式赋值与 dom 更新。
Svelte 是一个前端 JavaScript 框架，但它和 React、Vue 的思路完全不同：它不在浏览器里做虚拟 DOM 或响应式追踪，而是把组件在构建时（build time）就编译成高效、无框架依赖的原生 JS 代码。
它不是运行时框架，而是编译器
Svelte 的核心身份是“编译器”，不是运行时库。你写的 .svelte 文件，经过 Svelte 编译器处理后，会输出纯 JavaScript（含 HTML 和 CSS），直接操作 DOM，不带任何运行时开销。这意味着最终打包产物里没有 “Svelte 运行时” —— 它只在开发和构建阶段存在。
- 组件中声明的 响应式语句（比如
$: doubled = count * 2）会被转成普通 JS 的赋值和监听逻辑 -
绑定语法（
bind:value={name}）会生成对应的 get/set 和事件监听（如 input 事件） - {#if}、{#each} 等块级标签被展开为标准的 if/for 循环 + DOM 增删逻辑
- 样式默认局部作用域：类名自动加哈希（如
title_s123456），CSS 提取并去重
编译过程分三步：解析 → 转换 → 生成
当你运行 npx svelte-kit build 或使用 Rollup/Vite 插件时，Svelte 编译器会依次完成：
- 解析（Parse）：把 .svelte 文件拆成 script / style / template 三部分，构建 AST
- 转换（Transform）：分析响应式依赖、识别绑定、标记更新点，生成中间表示（IR）
-
生成（Generate）：把 IR 输出为可执行 JS —— 包含
$$render渲染函数、$$set属性更新方法、以及生命周期钩子调用
生成的 JS 里看不到 svelte/internal 的调用（v3 之后已内联），所有逻辑都是扁平、可读、可调试的。
立即学习“Java免费学习笔记（深入）”；
和 React/Vue 编译的关键区别
React 的 JSX 编译（如 Babel）只做语法转换（<div>Hello</div> → React.createElement(...)），真正的协调（reconciliation）留在运行时；Vue 的模板编译也输出 render 函数，但仍需 Vue runtime 来执行响应式系统和 patch 算法。而 Svelte 把这些全提前到构建期做了：
- 响应式不是靠 Proxy 或 defineProperty，而是靠编译出的显式赋值通知（
$$invalidate('count', count)） - 组件实例就是普通 JS 对象，new Component() 就能创建，无需挂载到框架上下文
- 没有 diff、没有 VNode、没有 patch —— 更新就是直接改 DOM 属性或 innerHTML
基本上就这些。Svelte 的“魔法”不在运行时，而在它足够聪明地把响应式逻辑静态分析出来，并编译成手写级别干净的 JS。写起来像声明式，跑起来像命令式。
