大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1.什么是Tauri？

Tauri是一个为所有桌面平台构建小巧、快速的二进制文件的框架。 开发人员可以集成任何编译为 HTML、JS 和 CSS 的前端框架来构建用户界面。

Tauri 基于 Rust 构建，在设计上保证安全性、高性能、以及前端框架兼容，并允许您为所有桌面平台（包括 macOS、Windows 和 Linux 操作系统）创建可执行应用程序。

Tauri 是跨平台桌面开发类别中的开源工具，拥有 56.8K GitHub 星和 1.5K GitHub 分支。

2.Tauri 的核心组成

2.1 核心模块

Tauri核心模块包括：tauri 、tauri-build、tauri-codegen 、tauri-macros 、tauri-runtime 、tauri-runtime-wry 、tauri-utils等，其中每个模块的核心功能如下图所示，并支持Linux、Windows、Mac等核心平台。

Tauri 不是一个轻量级的内核包装器。 相反，它直接使用 WRY 和 TAO 来完成对操作系统进行系统调用的繁重工作。Tauri 也不是 VM 或虚拟化环境。 相反，它是一个允许制作 Webview OS 应用程序的应用程序工具包。Tauri核心生态系统如下图（具体模块功能可参考文末资料）：

2.2 开发工具

Tauri开发者工具包括：Tauri Bundler、api.js、cli.rs、cli.js等，其中每个工具的核心功能如下图所示，并支持Linux、Windows、Mac等核心平台。

2.3 实用程序和插件

Tauri提供了一个快速入门程序、同时为Vue生态提供了一个Vue-cli的tauri插件，用于快速入门tauri。

4.Tauri 的工作原理

4.1 Tauri使用WebView库

每个 Tauri 应用程序都包含一个核心进程作为程序的入口，并且是唯一可以完全访问操作系统的组件。 然而，核心进程并不呈现实际的应用程序界面； 相反，它会启动使用操作系统提供的 WebView 库的子进程，从而可以使用 Web 技术构建 Tauri 应用程序。

与 Electron 不同，Tauri使用 Chromium 引擎打包和呈现应用程序，而不管底层操作系统如何，Tauri 都使用操作系统的 WebView 库。 这样，WebView 库将不包含在最终的可执行文件中，而是在运行时动态链接，这大大降低了打包应用程序的大小和性能。

Tauri 还在 IPC 消息之上提供了一个类似于外部函数接口的抽象。 提供的 invoke API类似于浏览器的 fetch ，允许前端调用 Rust 函数、传递参数和接收数据。由于此机制在底层使用类似 JSON-RPC 的协议来序列化请求和响应，因此所有参数和返回数据都必须可序列化为 JSON。

4.2 Tauri的Webview版本依赖

4.2.1 Windows平台的WebView2

Tauri 使用基于 Microsoft Edge 和 Chromium 的 WebView2。 WebView2 可以自行更新，从而保证在所有 Windows 目标上使用相对较新的 Chromium 版本。

在 Windows 7 和更高版本上支持WebView2，并预装在 Windows 11 上。在早于 Windows 11 的版本上，Tauri 生成的安装程序负责确保系统上安装了 WebView2。

4.2.2 WebKit（macOS、iOS 和 Linux）

Tauri 在 macOS（通过 WKWebView）和 Linux（通过 webkit2gtk）上使用 WebKit。

WKWebView：显示交互式 Web 内容的对象，例如应用程序内浏览器。

5.Tauri的优缺点

5.1 Tauri优点

Tauri 由于使用webview 方法而比 Electron 应用程序轻量得多。 比如，使用 Electron 构建的重量超过 52MB 的示例应用程序在使用 Tauri 构建时会轻得多，大约 3MB。

Tauri 的一些主要优势包括：

• 更好的性能：Tauri 在性能、启动时间和内存消耗方面也优于 Electron 应用程序
• 自更新器：Tauri 包含一个自更新器功能，您可以在不依赖任何第三方库的情况下快速集成到应用程序中
• 跨平台：可以为所有主要桌面操作系统生成可执行文件

5.2 Tauri 的缺点

5.2.1 浏览器兼容性

Tauri 的一大缺点是浏览器兼容性问题。 有些 Web API 适用于 macOS WebView，但可能不适用于 Windows，反之亦然。 此外，input、button等 Web 元素的设计因操作系统 WebView 的不同而略有不同。

5.2.2 资源和生态

Tauri 仍处于起步阶段，其资源和生态系统也是如此。 与Electron相比，Tauri的生态系统目前仍然不太完善。NPM上搜索tauri和Electron关键字，后者相关的库达到了6,553个，而前者只有102个。

5.2.3 Rust的学习成本

使用 Tauri 时，大部分情况下不需要 Rust。 但是，随着您深入了解高级内容，您可能必须学习它。例如：如果 Tauri 的 JavaScript 插件不支持它们，则必须使用 Rust 进行高阶操作系统调用。

6.本文总结

本文主要和大家介绍Electron的替代品Tauri。因为笔者也没有在生产项目中使用、部署过Tauri，所以只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读，也欢迎大家在评论区留言。

参考资料

https://blog.logrocket.com/tauri-electron-comparison-migration-guide/

https://github.com/tauri-apps/tauri

https://tauri.app/v1/references/webview-versions

https://tauri.app/v1/references/architecture/#core-ecosystem

https://tauri.app/v1/references/architecture/inter-process-communication/

版权声明

图1、图2、图3、图4都来自于tauri.app官网