Electron vs Tauri：跨平台桌面应用开发如何选型？

在桌面端开发快速复兴的今天，“用前端技术构建跨平台桌面应用” 已经逐渐成为主流方案。无论是 VS Code、Figma、Slack 这样的重量级应用，还是内部工具、可视化面板、轻量管理台，前端团队都可以继续使用 HTML/CSS/JavaScript 构建原生应用体验。

在众多框架中，Electron 和 Tauri 绝对是当前最受关注的两种方案。
它们都允许你用 Web 技术构建 UI，但在架构、安全性、性能、体积等方面存在根本性差异。

本文将从架构原理、性能对比、安全模型、开发体验、生态质量与适用场景等角度全面分析两者的区别，帮助你做出更合理的技术选型。

一、核心理念：两者本质完全不同

一句话总结：

• Electron：捆绑一个完整的 Chromium 浏览器 + Node 环境，Web 能力最强，无需学习新语言。
• Tauri：利用系统自带 WebView，后端用 Rust 实现，天生轻量、安全、原生执行。

二、性能与资源占用：差距非常明显

为什么 Tauri 可以小十倍以上？

因为 Tauri 不捆绑浏览器。

Electron = 带着浏览器跑的应用
Tauri = 借用你系统的浏览器控件

三、开发体验对比：生态丰富 vs 安全先进

Electron 优势：
✔ 全 JS 技术栈，上手成本最低
✔ 调试体验无可替代
✔ 商业级生态最完整

Tauri 优势：
✔ Rust 加持，安全性与性能优秀
✔ 内存占用极低
✔ 打包体积领先一整代

四、安全模型：Tauri 默认更安全

Electron 的安全争议点在于：

如果 没有启用 contextIsolation，渲染进程能直接执行：

require('fs').readFileSync()

require('fs').readFileSync()

等价于网页直接获取本地文件内容，非常危险。

而 Tauri 的机制是：

• 前端 无法访问本地文件系统
• 必须通过 invoke('xxx') 调用 Rust 后端命令
• 未注册的命令完全无法访问，属于白名单机制

天然更安全。

五、典型功能示例：读取本地文件（差异最直观）

1. Electron：直接在前端读文件

preload.js

// 暴露文件读取能力（需要安全隔离）
const fs = require('fs');
const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('api', {
  // 同步读取文件内容
  readFile: (path) => fs.readFileSync(path, 'utf-8')
});

// 暴露文件读取能力（需要安全隔离）
const fs = require('fs');
const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('api', {
  // 同步读取文件内容
  readFile: (path) => fs.readFileSync(path, 'utf-8')
});

renderer.js

// 渲染进程直接调用
const content = window.api.readFile('/path/to/file.txt');
console.log(content);

// 渲染进程直接调用
const content = window.api.readFile('/path/to/file.txt');
console.log(content);

如果不做隔离，甚至能直接在 DevTools 中执行 Node API。

2. Tauri：必须走 Rust 侧定义的安全命令

前端 JS

// 调用 Rust 后端命令
import { invoke } from '@tauri-apps/api/tauri';

async function readFile() {
  const content = await invoke('read_file', { path: '/path/to/file.txt' });
  console.log(content);
}

// 调用 Rust 后端命令
import { invoke } from '@tauri-apps/api/tauri';

async function readFile() {
  const content = await invoke('read_file', { path: '/path/to/file.txt' });
  console.log(content);
}

Rust 后端

// 定义文件读取命令
#[tauri::command]
fn read_file(path: String) -> Result<String, String> {
    std::fs::read_to_string(path).map_err(|e| e.to_string())
}

// 定义文件读取命令
#[tauri::command]
fn read_file(path: String) -> Result<String, String> {
    std::fs::read_to_string(path).map_err(|e| e.to_string())
}

main.rs

// 注册命令
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![read_file])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// 注册命令
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![read_file])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Tauri 强制你以安全方式实现本地能力，前端无法越权。

六、生态与适用场景对比

Electron 适用场景

适合：

• 想全程使用 JavaScript
• 做大型商业级产品
• 需要丰富成熟的插件生态
• 强调一致渲染体验（Chromium）

典型应用：

• VS Code
• Slack
• Discord
• Figma

Electron = “重武器级框架”。

Tauri 适用场景

适合：

• 小体积客户端、工具类应用
• 需要安全隔离、低资源开销
• 对性能敏感
• 想学习并实践 Rust
• 嵌入式设备、面板工具、管理台

Tauri = “轻量高性能原生结合的新方向”。

七、最终选型建议（精华总结）

一句话定论：

🔵 做大应用 → Electron
🟠 做轻量工具 → Tauri