5月28日 02:57

Tauri 支持哪些前端框架？

Tauri 是一个用 Rust 构建后端、用 Web 技术构建前端的跨平台应用框架。它的核心设计是前后端完全解耦——前端通过系统 Webview 渲染界面，后端通过 Rust 处理系统级操作，两者经 IPC 通信。这意味着 Tauri 天然支持任何基于 Web 标准的前端框架，开发者无需被特定技术栈限制。

Tauri 为什么能支持所有前端框架

Tauri 的架构分两层：

前端层：运行在系统 Webview 中，使用 HTML、CSS、JavaScript 渲染界面。任何能输出 DOM 的技术都能跑在这里。
后端层：Rust 编写的原生代码，处理文件系统、网络、窗口管理等系统操作，通过 Tauri IPC 与前端交互。

关键点在于：Tauri 后端完全不关心前端用了什么框架。只要你的代码跑在 Webview 里、能调用 @tauri-apps/api，就能和 Rust 后端通信。这种解耦设计让框架选择变成纯粹的前端工程决策。

Tauri 2.x 支持的前端框架与元框架

Tauri 2.0（2024年稳定版发布）进一步扩展了对前端生态的支持。通过 create-tauri-app 脚手架，可直接选择以下框架初始化项目：

框架	脚手架支持	特点
React	直接支持	社区最大，Hooks 与 invoke 配合流畅
Vue 3	直接支持	Composition API 与 Tauri 事件模型天然契合
Svelte	直接支持	编译时优化，包体最小，适合轻量工具
Angular	直接支持	严格类型系统，适合大型企业应用
SolidJS	直接支持	细粒度响应式，性能极佳
Vanilla JS	直接支持	零框架开销，适合极简场景

此外，Tauri 2.x 也支持主流元框架：

元框架	适用场景
Next.js	SSR/SSG + Tauri 混合架构
Nuxt	Vue 生态的 SSR 方案
SvelteKit	Svelte 全栈开发
Astro	内容驱动型桌面应用

自定义框架同样可行：任何能编译到 HTML/CSS/JS 的框架（如 Preact、Lit、Qwik）都可以与 Tauri 配合，只需手动配置 tauri.conf.json 中的 devUrl 和 frontendDist 即可。

框架选型的实际考量

不同框架在 Tauri 中有各自的实践差异，以下是基于真实开发场景的对比：

小型工具类应用（1-5个页面）

Svelte 是首选。一个简单的系统监控工具，Svelte 编译后的 JS 体积约 5KB，而 React 运行时约 40KB。在 Tauri 的 Webview 环境中，更小的 JS 体积意味着更快的首屏加载。Svelte 的响应式赋值语法也很适合 Tauri 的命令式 IPC 调用：

svelte
<script>
  import { invoke } from '@tauri-apps/api/core';

  let info = '';
  async function fetchInfo() {
    info = await invoke('get_system_info');
  }
</script>

<button on:click={fetchInfo}>获取系统信息</button>
<p>{info}</p>

中大型业务应用

React 和 Vue 是主流选择。React 的 Hooks 模型可以干净地封装 Tauri invoke 调用：

javascript
import { invoke } from '@tauri-apps/api/core';
import { useQuery } from '@tanstack/react-query';

function useSystemInfo() {
  return useQuery({
    queryKey: ['systemInfo'],
    queryFn: () => invoke('get_system_info'),
  });
}

Vue 的 Composition API 同样自然：

javascript
import { invoke } from '@tauri-apps/api/core';
import { ref, onMounted } from 'vue';

const info = ref('');
onMounted(async () => {
  info.value = await invoke('get_system_info');
});

需要严格类型的企业应用

Angular 的依赖注入系统和 TypeScript 强类型与 Tauri 的 invoke 泛型配合良好：

typescript
import { invoke } from '@tauri-apps/api/core';

interface SystemInfo {
  arch: string;
  memory: number;
}

const info = await invoke<SystemInfo>('get_system_info');

Tauri 2.x 的前端 API 变化

Tauri 2.x 对前端 API 做了重要调整，直接影响框架集成方式：

API 路径变更：@tauri-apps/api/tauri 中的 invoke 迁移到 @tauri-apps/api/core。如果你从 Tauri 1.x 迁移，需要更新所有导入路径。

权限系统：Tauri 2.x 引入了细粒度权限模型。前端调用系统功能不再只需配置 allowlist，而是需要在 capabilities 中声明具体权限。例如调用文件系统需要：

json
{
  "identifier": "fs:allow-read",
  "allow": [{ "path": "$APPDATA/**" }]
}

移动端支持：Tauri 2.x 新增 iOS 和 Android 平台支持。前端代码基本不变，但需要处理移动端的交互差异（如触控事件、安全区域边距）。

性能优化实践

无论选择哪个框架，以下优化在 Tauri 中通用：

减少 IPC 调用频率：每次 invoke 都涉及跨进程通信。批量操作应合并为单次调用：

javascript
// 不推荐：多次 IPC
const name = await invoke('get_name');
const version = await invoke('get_version');
const arch = await invoke('get_arch');

// 推荐：单次 IPC
const system = await invoke('get_system_info');

避免阻塞主线程：所有 invoke 调用都是异步的，不要用同步方式等待结果。配合框架的异步状态管理（如 React Query、Vue的 async setup）效果最佳。

监听事件的内存管理：使用 listen 监听后端事件时，记得在组件卸载时取消监听：

javascript
import { listen } from '@tauri-apps/api/event';

onMounted(async () => {
  const unlisten = await listen('file-changed', (event) => {
    console.log(event.payload);
  });
  onUnmounted(unlisten);
});

不同框架在 Tauri 中的真实表现

根据社区反馈和 benchmark 数据：

启动速度：Svelte 应用最快（Webview 冷启动 + JS 解析最少），React/Vue 次之，Angular 因框架体积较大启动略慢
内存占用：Svelte < Vue < React < Angular，但差距在 10-30MB 范围内，远小于 Electron 同类应用的差距
打包体积：Svelte 应用总包体可低至 3-5MB，React/Vue 应用约 5-10MB，Angular 约 8-15MB（均远小于 Electron 的 100MB+）
开发体验：各框架均支持 HMR 热更新，开发体验与 Web 开发一致

Tauri 通过前后端解耦的设计，让前端框架选择回归到纯粹的技术选型问题。Svelte 适合追求极致轻量，React/Vue 适合平衡生态和性能，Angular 适合大型团队规范。Tauri 2.x 的移动端支持和细粒度权限系统进一步扩展了应用场景，无论选择哪个框架，核心的 Rust 后端能力和 IPC 通信机制都是一致的。

标签：Tauri