为什么Svelte被称为compiler，其他前端框架却被称为transpiler

很多人会把两个概念完全对立，其实Transpiler（转译器）本身就是编译器的一个细分分支，核心差异是转换前后代码的抽象层级：

• 转译器做的是平级语法改写：输入和输出的代码抽象程度几乎一致，代码结构基本1:1对应，只是换了一套语法规则。
  常见的比如Babel把高版本ES语法转成低版本兼容写法、TypeScript转JavaScript、JSX转React.createElement调用，都属于这类：你写的函数、类、业务逻辑结构会被完整保留，转译器不会替你生成额外的核心运行逻辑，框架本身的Runtime（运行时）还是要完整打包到最终产物里，在浏览器端负责虚拟DOM比对、响应式更新这些核心工作。
  举个最直观的例子，你写的箭头函数const sum = (a,b) => a+b经过Babel转译后，只会变成等价的普通函数写法，逻辑、结构完全没有本质变化。

核心原因是Svelte的构建过程根本不是平级语法转译，而是做了跨层级的语义分析+原生逻辑生成，和常规框架的转译逻辑有本质区别：

• 第一，你写的Svelte组件代码不会被原样保留到输出结果中。Svelte会在构建阶段静态分析你写的模板、$:响应式语句、事件绑定，直接精准生成对应原生DOM操作的命令式代码，全程没有虚拟DOM层，也不需要搭载重量级的框架运行时。
  比如你写一个最简单的计数组件：

  <script>
    let count = 0
    const increment = () => count++
  </script>
  <button on:click={increment}>已点击 {count} 次</button>
  

  Svelte编译后的产物不会保留任何Svelte组件结构、响应式代理、Diff逻辑，只会生成最精简的原生JS代码，大概逻辑如下：

  // 直接创建真实DOM节点
  const btn = document.createElement('button')
  let count = 0
  const increment = () => {
    count++
    // 精准定位到count变化影响的唯一DOM节点，直接更新，不需要全树比对
    btn.textContent = `已点击 ${count} 次`
  }
  btn.addEventListener('click', increment)
  btn.textContent = `已点击 ${count} 次`
  document.body.appendChild(btn)
  

  这种把高抽象度的声明式组件描述，拆解重写为低抽象度的浏览器原生指令的过程，就是典型的编译器行为，和转译器的平级改写完全不是一个逻辑。
• 第二，Svelte没有固定的强制Runtime包。常规框架不管你写多简单的组件，都要把整个框架运行时（比如React、Vue的核心包，普遍几十上百KB）打包进去，转译器根本不会管你用了框架多少功能。但Svelte只会在编译时分析你用到的功能，把对应几行工具代码按需注入产物，没用到的逻辑会被完全裁掉，这也是编译器做静态分析、按需生成代码的典型特征。

补充一个常见误区：大家特意把Svelte叫编译器，本质是为了突出它和其他“转译语法+带运行时”的框架的核心差异，不是说其他转译工具不属于编译器范畴，只是二者的编译深度、产物形态完全不一样。

内容的提问来源于stack exchange，提问作者Pulman3