Pake：这款 CLI 工具能制作 5MB 的桌面应用

中文العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00这是 Paik，一个命令行工具，只需一条命令
00:00:05就能将任何网站变为原生桌面应用。它基于 Rust 构建，因此生成的应用大小仅为 5MB 左右，
00:00:10相比之下，Electron 捆绑了整个 Chrome 内核，体积庞大。你甚至可以注入自定义
00:00:15CSS 和 JavaScript，添加托盘图标，并更改标题栏样式，所有这些都不需要
00:00:20编写一行 Rust 代码。但为什么要用它而不是其他类似工具呢？如果它是基于 Rust 构建的，
00:00:25为什么 Paik 要求我安装 PNPM 或 NPM？我其实不想知道，
00:00:31但订阅频道，让我们一探究竟。Paik 由来自中国的独立产品工程师 TW93 于 2022 年创建，
00:00:40他还是超火的 Mac 优化工具 Mole 的开发者，我其实已经用了很久了。
00:00:45但 Paik 的想法非常有道理，因为仔细想想，
00:00:49像 YouTube Music、Gmail 和 Instagram 都没有官方原生应用。它们只存在于
00:00:55浏览器标签页里。如果你想要浏览器的全部功能，这没问题，但如果你想要一个
00:00:59性能更好、且拥有独立程序坞图标以便区分的网站应用，
00:01:04那么拥有一个独立的应用就非常实用了。这就是 Paik 的用武之地，它比 Electron 优秀得多，
00:01:09因为它基于 Tauri 2 构建，直接调用系统的原生网页视图，从而使应用
00:01:14更小、更快，内存占用更少，类似于 Electro、Bun 或 Vercel 的 Zero Native 的工作原理，
00:01:19稍后我会在视频中详细介绍。但 TW93 在 Tauri 2 之上编写的自定义代码
00:01:24大约有 1800 行 Rust 代码，处理窗口管理、原生菜单
00:01:30和 JavaScript 注入等功能。只需运行一个命令，Paik 就能搞定一切。事实上，
00:01:35让我们试着用 Paik 把我的胶片模拟项目变成一个独立应用。在安装完
00:01:40Paik CLI 后，如果你用过 Mole，会发现它看起来非常相似，而且
00:01:45它没有太多标志，我觉得这是件好事。在我的项目服务器运行时，我可以运行带有
00:01:50URL 和我想要的应用名称的 Paik 命令。现在输入回车，它会自动获取图标并开始
00:01:55创建应用的过程，大约需要 5 到 10 分钟。完成后，它会创建一个
00:02:00DNG 文件，大小可以在这里看到是 4.3MB。点击它，这就是我们的应用，
00:02:05我们可以通过把它拖进应用程序文件夹来安装。虽然看起来没抓取到图标，但这
00:02:10没关系。现在打开应用，可以看到它立即生效了，图标也出现在了程序坞中。
00:02:14我可以选择视频，一切运作正常。如果查看活动监视器，
00:02:19我们可以发现我们的应用只占用了 61MB 内存，相比之下 ARC 浏览器占用了大量资源。
00:02:24如果我们看看应用大小，它只有 55MB，而像 Slack 这样的 Electron 应用
00:02:30体积高达 310MB。但正如你早些时候看到的，Paik 有一些非常有趣的选项。例如，
00:02:35我可以用 debug 标志构建同一个应用来访问开发工具。我还可以
00:02:40使用 hide title bar 标志来编辑状态栏，使其感觉更像原生应用，它会提供一个
00:02:46无框标题栏。但这应用显然不是为无框设计的。幸运的是，Paik 提供了
00:02:51一个选项来修复这个问题，而无需编辑应用源码。我可以写一些自定义 CSS
00:02:56并用 inject 标志将其注入到应用中，这在顶部增加了内边距，但也意味着
00:03:01底部有更多的滚动空间。我们可以使用 show system tray 标志，在系统托盘显示图标，
00:03:06允许我们显示和隐藏应用。我们甚至可以注入 JavaScript 以及 CSS。
00:03:12但目前看来，你还无法编辑 Paik 默认提供的菜单项。
00:03:17而且 Paik 只对运行中的 URL 有效。所以如果我关闭服务器再尝试打开应用，
00:03:23它只会显示空白屏幕。但平心而论，Paik 本来就不是为本地应用设计的。我测试过
00:03:28一个 YouTube Music 应用，通过一条命令运行，效果出奇的好。它甚至可以离线工作，
00:03:33因为 YouTube Music 网站本身就是这样运作的。所以我一直在把它当作我的主力音乐播放器，
00:03:38但它基本上不是你所拥有的桌面应用的工具，因为 Paik 是基于实时
00:03:42URL 封装的，除非你使用 use local file 选项（我是做完这个视频后才发现的），否则不会捆绑你的代码。
00:03:48我也觉得它构建得并不完善。听我说，我安装 Paik 时
00:03:53使用的是 BUN 而不是 PNPM 或 NPM，但它内部需要其中之一来设置 Tauri 构建环境。
00:04:00而我的 PNPM 版本比它要求的还要新，这意味着它拒绝构建并
00:04:05安装我想要的应用。所以我不得不使用 Claude Code 来修改 Paik 的源码才能让它正常工作。
00:04:11我确实为此提交了一个 issue，但如果 Paik 提供编译好的二进制文件，这一切本可以避免，
00:04:15这也是使用像 ElectroBUN 或 ZeroNative 之类工具的优势，
00:04:20因为 ElectroBUN 在网页视图背后提供了一个真正的 BUN 运行时，意味着你可以运行后端
00:04:25逻辑，而 ZeroNative 更进一步，提供了一个可以直接调用 C 库的完整 Zig shell。
00:04:31所以 Paik 是封装实时网站的最快方式，但如果你有其他需求，
00:04:36最好还是选择其他工具。

Key Takeaway

Paik 是一款基于 Tauri 2 的轻量级 CLI 工具，能通过一条指令将网站快速封装成体积仅 5MB 左右的高性能原生桌面应用。

Highlights

  • Paik 工具通过单条命令行指令，将任意网站封装为体积仅 5MB 左右的原生桌面应用。

  • 该工具基于 Tauri 2 构建，利用系统原生网页视图，在内存占用和响应速度上显著优于基于 Electron 的应用。

  • 用户可利用 inject 标志注入自定义 CSS 和 JavaScript，实现标题栏样式修改及托盘图标添加等功能。

  • Paik 主要针对实时在线 URL 进行封装，运行应用时必须确保原始网站服务器处于活跃状态。

  • 构建过程中依赖 PNPM 或 NPM 环境，对于不同版本环境的兼容性处理尚不完善，有时需要手动修改源码。

  • 与 Slack 等占用数百兆内存的 Electron 应用相比，Paik 构建的同类应用内存开销可降低至 61MB 左右。

Timeline

Paik 的核心定位与优势

  • Paik 旨在解决部分 Web 应用缺乏官方原生客户端的问题。
  • 该工具基于 Rust 和 Tauri 2 构建，通过调用系统原生网页视图实现极低的体积与资源占用。
  • 开发者 TW93 通过约 1800 行自定义 Rust 代码处理了窗口管理与脚本注入逻辑。

许多常用网站如 YouTube Music 或 Gmail 缺乏原生桌面版本。Paik 利用 Tauri 2 的技术架构，避开了 Electron 捆绑完整 Chrome 内核导致体积臃肿的问题，生成应用体积仅 5MB 左右，内存占用明显降低。

部署过程与实战表现

  • 安装后的 CLI 工具通过简单命令即可完成从 URL 到桌面应用的转换。
  • 应用在构建完成后可直接拖入程序坞使用，并拥有独立图标。
  • 对比实验显示，同类 Web 应用的内存占用从 Electron 架构的超大需求降低至 61MB。

以胶片模拟项目为例，在运行服务器后输入对应的 Paik 命令，系统会在 5 到 10 分钟内完成封装。生成的应用在活动监视器中显示内存占用仅 61MB，显著优于主流浏览器和 Electron 应用的资源消耗。

高级配置与局限性分析

  • 用户可通过标志位自定义无框标题栏、系统托盘图标以及注入自定义 CSS 和 JavaScript。
  • 由于 Paik 基于实时 URL 封装，若本地服务器关闭，应用将无法加载内容。
  • 该工具在环境依赖方面存在局限，构建环境的严苛要求可能导致安装失败并需要手动修改源码。

Paik 虽然提供了强大的注入能力和标志位定制，但其本质是实时网站的壳，而非完整打包本地源码，因此要求网络连接或本地服务在线。此外，对于 PNPM 版本等环境依赖的限制，使其在不同开发环境下可能出现兼容性问题，不如某些内置完整运行时的方案成熟。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video