编译时框架 vs 运行时框架

#前端框架

1. 总结
2. 定义
3. 主流框架对比分析
4. 性能对比
- 4.1. 编译时优势
- 4.2. 运行时优势
5. 构建产物对比（React 与 Svelte）
6. 使用场景建议
- 6.1. 编译时框架（如 Svelte）适合
- 6.2. 运行时框架（如 React）适合
7. 开发体验对比
- 7.1. 编译时框架
- 7.2. 运行时框架
8. 未来趋势
9. 选择建议

1. 总结

主流框架都是==编译时+运行时框架==，比如 vue、React 等
- 结合==编译时优化==和==运行时灵活性&动态性==
运行时框架
- 运行时进行，组件渲染、状态管理、使用虚拟 DOM 进行==差异化更新==
编译时框架：Svelte
选择建议
- 性能敏感
  - 可考虑 Svelte
- 静态内容为主
  - 可考虑 Svelte

2. 定义

编译时框架（Compile-time Framework）：
- 在构建阶段完成大部分工作
- 将框架代码转换为优化后的原生 JavaScript
- 最小化运行时开销
- 代表框架：
  - Svelte、Solid
运行时框架（Runtime Framework）：
- 在浏览器中需要完整的框架运行时
- 使用虚拟 DOM 进行差异化更新
- 运行时进行
  - 组件渲染
  - ==状态管理==
- 代表框架：
  - React、Vue、Angular

3. 主流框架对比分析

3.1. React（运行时框架）

// React 示例
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

需要完整的 React 运行时
使用虚拟 DOM 进行差异化更新
状态更新触发组件重新渲染
打包后包含框架代码

当然也有编译动作，比如 JSX 的编译，各类打包动作等等

3.2. Svelte（编译时框架）

// Svelte 示例
<script>
  let count = 0;
</script>

<div>
  <p>{count}</p>
  <button on:click={() => count++}>+</button>
</div>

编译后生成
- → 原生 JavaScript
无虚拟 DOM
精确更新 DOM
最小化运行时代码

3.3. Vue（混合模式）

// Vue 示例
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

包含运行时但相对轻量
使用虚拟 DOM
响应式系统
编译优化模板
- 静态变量提升
- v-memo
- v-once
- 等等

4. 性能对比

4.1. 编译时优势

更小的包体积
更快的首次加载
更少的内存占用
更直接的 DOM 操作

4.2. 运行时优势

动态性更强
更灵活的组件复用
更成熟的生态系统
开发工具支持更好

5. 构建产物对比（React 与 Svelte）

让我们通过代码示例来看一个简单计数器在不同框架下的构建产物差异：

// React 构建产物（简化示意）
import { useState } from 'react';

// React 运行时代码...
function Counter() {
  const [count, setCount] = useState(0);
  return React.createElement('div', null,
    React.createElement('p', null, count),
    React.createElement('button', { onClick: () => setCount(count + 1) }, '+')
  );
}

// Svelte 构建产物（简化示意）
let count = 0;
const p = document.createElement('p');
const button = document.createElement('button');
p.textContent = count;
button.textContent = '+';
button.addEventListener('click', () => {
    count++;
    p.textContent = count;
});