初步尝试 tauri,并且与 electron.js 对比

sxkk20082年前知识分享232

什么是 Tauri?

Tauri 是一个为所有主流桌面平台构建小型、快速二进制文件的框架。开发人员可以集成任何编译成 HTML、 JS 和 CSS 的前端框架来构建他们的用户界面。应用程序的后端是一个 Rust 二进制文件,具有前端可以与之交互的 API。

image.png

在 2021 年 star 排行榜单中,tauri 一年增长了 18k 排名第五,我们就很好奇,Tauri 有什么优势呢?

然后我分别用 tauri 和 Electron.JS 打包测试一个 hello world 程序,一起来看下它们的大小。

大小对比

  • Electron.JS 62.5mb
  • Tauri 4.32mb

Tauri 构建的桌面程序太小了,远不是 Electron.JS 可以相比的,因为它放弃了体积巨大的  Chromium 内核   和  nodejs,前端使用操作系统的  webview,后端集成了  Rust。 Tauri 提供了初始化程序的模板,比如原生 js, react, svelte.js, vue.js 等等。

image.png

MOBILE when? 这条 issues 看, Tauri 团队也正在努力支持 Android and IOS.这是不是有点小期待呢?

开始尝试 Tauri

因为 Tauri 是一个多语言的工具链,涉及安装有点复杂。

我这边是 macos 系统

1、 首先要安装 gcc 编译器

$ brew install gcc

homebrew 可以先切换清华大学的源, 需要先安装 homebrew, 下面命令是 homebrew 的国内安装地址

安装 homebrew

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

2、 确保已经安装 xcode

xcode-select --install

3、安装 Nodejs 运行环境 和包管理工具 yarn

这一步前端都已经装了

4、安装是 Rust 编程语言的编译器 rustc

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

image.png

然后就可以使用官方 cli 初始化程序了。

yarn create tauri-app

image.png

然后要在项目目录下初始化

yarn tauri init

image.png

这一步骤很慢,我不清楚是否是我没指定 rust 国内源,知道的小伙伴可以在评论区留言。 完成之后执 yarn start 就跟开发 react 程序一样,就可以实时热更新了。

image.png

第一次运行这个命令时,Rust 包管理器需要几分钟时间下载并构建所有需要的包,后续的构建会快得多,因为它们是有缓存的。

客户端开发启动命令

yarn tauri dev

右键也可以审查元素

image.png

打包客户端

yarn tauri build

image.png

与 Electron 对比

我们可以通过官方 github Readme 查看与 electron 对比

Comparison between Tauri and Electron

详细TauriElectron
安装包大小 Linux3.1 MB52.1 MB
内存消耗 Linux180 MB462 MB
启动时间 Linux0.39s0.80s
界面服务提供WRYChromium
后端绑定RustNode.js (ECMAScript)
潜在引擎RustV8 (C/C++)
FLOSSYesNo
多线程YesYes
字节码交付YesNo
多多窗口YesYes
自动更新YesYes1
自定义 App IconYesYes
Windows BinaryYesYes
MacOS BinaryYesYes
Linux BinaryYesYes
iOS BinarySoonNo
Android BinarySoonNo
Desktop TrayYesYes
Sidecar BinariesYesNo

小结

这次尝试,只是从 web 层,并没有涉及系统 后端,需要学一些 rust 相关的知识。若单纯 web 程序打包,使用 tauri 会更小,若熟悉 node.js api 的还是推荐 electron.js ,毕竟 vscode 这么大的程序也是 electron.js 构建的。

以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

相关文章

人工智能编程入门:了解AI编程的基础知识及其应用

人工智能编程入门:了解AI编程的基础知识及其应用

  人工智能编程是当前IT行业中最热门的领域之一,其发展速度非常快。人工智能过去只是虚构作品的想象,现在却是各大公司都在研发的技术。它可以改变人们的日常生活,并带来商业上的巨...

AI技术安全-防范风险与保障隐私的挑战与机遇

AI技术安全-防范风险与保障隐私的挑战与机遇

  现如今,人工智能(AI)技术正以惊人的速度不断发展,构建着各行各业的数字世界。与此同时,随着数字经济、智能化生产、信息化社会等趋势的不断加速,AI技术的应用也在日益扩大。...

文字识别插件人工智能技术:提升效率、深挖数据潜能

文字识别插件人工智能技术:提升效率、深挖数据潜能

  文字识别(OCR)插件是一种基于机器学习和人工智能的技术,可将文档、图片中的文字提取出来,实现自动识别和转换。在如今信息爆炸的时代,文字识别插件的应用范围日益广泛,包括但...

人工智能对生活的改变 - 从智能家居到医疗健康

人工智能对生活的改变 - 从智能家居到医疗健康

  近年来,人工智能技术快速发展,已经深入到我们的生活中。从智能家居到医疗健康,AI的应用已经开始改变我们的生活方式,甚至可能重塑我们的社会结构。本文就从智能家居、智能医疗和...

我在工作中使用 git 的几个技巧

前言Git 是每个程序员的必备技能,良好的 Git 提交习惯,不但可以让代码阅读更清晰,还可以提高我们的我们的工作效率,接下来我将分享我在工作中关于 Git 的使用经验,或许对你有帮助。Git 工作流...

文本转语音如此简单

文本转语音如此简单

Your browser does not support the audio element.前言哈喽,大家好,我是Ai知识分享,这两天在研究文本转音的功能,有时候担心自己的普通话不标准,比方说要录...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。