告别Electron臃肿？手把手教你用Tauri 2.x Beta + Rust + 前端三件套打造轻量级桌面应用

告别Electron臃肿？用Tauri 2.x Beta + Rust + 前端三件套打造轻量级桌面应用

在桌面应用开发领域，Electron曾凭借其跨平台能力和丰富的前端生态占据主导地位。但随着应用复杂度提升，Electron的缺点日益凸显——动辄上百MB的安装包、高昂的内存占用和缓慢的启动速度让开发者开始寻找更高效的替代方案。Tauri应运而生，它巧妙地将Rust的高效与前端技术的灵活相结合，为轻量级桌面应用开发提供了全新选择。

本文将基于Tauri 2.x Beta版本，通过构建一个Markdown编辑器实例，展示如何利用Rust与前端技术栈打造高性能桌面应用。不同于Electron打包整个Chromium内核的方案，Tauri采用操作系统原生WebView，使最终应用体积缩小90%以上。我们不仅会对比两者在关键指标上的差异，还会提供从环境配置到打包发布的完整开发指南。

1. 环境准备与项目初始化

1.1 开发环境要求

开始前需确保系统已安装以下工具链：

• Rust工具链：Tauri的核心基于Rust构建
• Node.js 16+：前端开发环境基础
• 包管理器：npm/yarn/pnpm任选其一
• Tauri CLI：项目脚手架工具

安装Rust工具链只需执行：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

验证安装成功后，继续安装Tauri CLI：

npm install -g @tauri-apps/cli

1.2 创建Tauri项目

使用以下命令初始化项目骨架：

tauri init markdown-editor --template vue-ts

该命令创建了一个基于Vue3+TypeScript的前端项目，同时集成了Tauri后端。项目结构主要包含：

├── src-tauri # Rust后端代码 │ ├── Cargo.toml │ └── src/main.rs ├── src # 前端源代码 │ ├── App.vue │ └── main.ts └── package.json # 前端依赖

提示：Tauri 2.x对TypeScript提供了开箱即用的支持，建议新项目直接采用TS以获得更好的类型安全。

2. 核心功能开发

2.1 实现Markdown渲染功能

首先在前端安装必要的依赖：

npm install marked highlight.js

创建Markdown编辑器组件：

<template> <div class="editor-container"> <textarea v-model="rawText"></textarea> <div class="preview" v-html="compiledMarkdown"></div> </div> </template> <script setup lang="ts"> import { ref, computed } from 'vue' import { marked } from 'marked' import hljs from 'highlight.js' marked.setOptions({ highlight: (code) => hljs.highlightAuto(code).value }) const rawText = ref('# Hello Tauri!') const compiledMarkdown = computed(() => marked(rawText.value)) </script>

2.2 Rust后端文件操作

在src-tauri/src/main.rs中添加文件读写功能：

use std::fs; use tauri::command; #[command] fn read_file(path: String) -> Result<String, String> { fs::read_to_string(&path).map_err(|e| e.to_string()) } #[command] fn write_file(path: String, contents: String) -> Result<(), String> { fs::write(&path, contents).map_err(|e| e.to_string()) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![read_file, write_file]) .run(tauri::generate_context!()) .expect("error while running tauri application"); }

前端调用示例：

import { invoke } from '@tauri-apps/api' async function saveFile() { try { await invoke('write_file', { path: '/path/to/file.md', contents: markdownContent.value }) } catch (error) { console.error('保存失败:', error) } }

3. 性能优化实战

3.1 应用体积对比

通过实际构建对比Tauri与Electron的应用体积：

Tauri的体积优势主要来自：

• 复用系统WebView而非打包Chromium
• Rust编译的高效二进制
• 按需引入的API设计

3.2 内存占用优化

通过系统监视器实测内存使用情况：

1. 冷启动内存：

   • Tauri：~50MB
   • Electron：~150MB

2. 长时间运行内存增长：

   • Tauri：稳定在±10%范围内
   • Electron：可能增长至初始值的2-3倍

优化技巧：

// 在Rust端使用Arc和Mutex共享状态 use std::sync::{Arc, Mutex}; struct AppState { counter: i32, } #[command] fn increment(state: Arc<Mutex<AppState>>) -> i32 { let mut data = state.lock().unwrap(); data.counter += 1; data.counter }

4. Tauri 2.x新特性应用

4.1 增强的窗口定制

在tauri.conf.json中配置自定义窗口：

{ "windows": [{ "title": "Markdown Editor", "width": 1200, "height": 800, "resizable": true, "transparent": true, "decorations": false, "effects": { "blur": true } }] }

4.2 改进的API设计

Tauri 2.x引入了更符合人体工程学的API调用方式：

// 旧版 import { invoke } from '@tauri-apps/api/tauri' // 新版 import { saveFile } from '@tauri-apps/api/fs' import { ask } from '@tauri-apps/api/dialog' async function exportMarkdown() { const path = await ask({ title: '保存位置', filters: [{ name: 'Markdown', extensions: ['md'] }] }) if (path) { await saveFile(path, content) } }

5. 打包与分发

5.1 多平台构建配置

修改tauri.conf.json支持多平台：

{ "build": { "target": ["msi", "appimage", "dmg"], "bundle": { "identifier": "com.example.markdown", "icon": ["icons/32x32.png", "icons/128x128.png"] } } }

执行构建命令：

tauri build

5.2 自动更新机制

Tauri内置了安全的自动更新功能，只需在配置中启用：

{ "updater": { "active": true, "endpoints": [ "https://your-update-server.com/api/updates" ], "dialog": true } }

在Rust端实现更新逻辑：

use tauri::updater::UpdateBuilder; fn check_update(app: tauri::AppHandle) { UpdateBuilder::new() .check_now(move |result| { if let Ok(update) = result { if update.is_update_available() { app.emit("update-available", update.latest_version()).unwrap(); } } }); }

在实际项目开发中，Tauri的轻量特性使得构建和测试周期大幅缩短。一个典型的功能迭代在Electron项目中可能需要5分钟的构建时间，而在Tauri中通常只需30秒左右。这种开发效率的提升，加上运行时性能的优势，使得Tauri成为现代桌面应用开发的有力竞争者。