Electrobun 架構(gòu)拆解TypeScript 怎么寫出一個 MB 級桌面應(yīng)用【免費下載鏈接】electrobunBuild ultra fast, tiny, and cross-platform desktop apps with Typescript.項目地址: https://gitcode.com/GitHub_Trending/el/electrobun打開一個 200MB 的安裝包等進度條走完啟動后窗口還要幾秒才出來——對一個小工具來說這通常是傳統(tǒng)桌面框架的默認(rèn)配置。Electrobun 是一個跨平臺桌面應(yīng)用框架業(yè)務(wù)代碼全部用 TypeScript 寫主進程跑在 Bun 生態(tài)或其輕量替代上系統(tǒng)層用 Zig 編寫安裝包體在 MB 級而不是幾百 MB。Electrobun 技術(shù)構(gòu)成三層組合各拿什么收益先說結(jié)論這套組合的收益來自不打包瀏覽器——默認(rèn)渲染直接復(fù)用用戶系統(tǒng)里的 webviewmacOS 用 WKWebViewWindows 用 WebView2Linux 用 WebKitGTK即各操作系統(tǒng)自帶的瀏覽器引擎組件只有顯式打開bundleCEF時才把 Chromium 塞進安裝包。應(yīng)用層窗口、菜單、托盤、對話框、自動更新全部是 TypeScript API。運行時層主進程默認(rèn)跑在 Cottontail 上——一個基于 JavaScriptCore、用 Zig 構(gòu)建的小型運行時提供 Node.js 與 Bun 兼容的 API也可以直接用 Bun或換成 Rust、Go、Zig、Odin 當(dāng)主進程。系統(tǒng)層Zig C Objective-C負(fù)責(zé)窗口系統(tǒng)、系統(tǒng)調(diào)用與性能關(guān)鍵路徑。項目的吉祥物是一只兔子名字里的 bun 同時指向 Bun 運行時。 Electrobun 自底向上架構(gòu)拆解從最底層講起每層只回答兩個問題負(fù)責(zé)什么為什么必須放在這一層。系統(tǒng)層啟動與關(guān)鍵路徑必須交給原生代碼它負(fù)責(zé)應(yīng)用的前兩步和后一步第一步是啟動器負(fù)責(zé)把進程拉起來中間是性能關(guān)鍵路徑比如自解壓安裝包的解包最后是窗口系統(tǒng)、系統(tǒng)調(diào)用的對接。啟動器代碼在 package/src/launcher/自解壓解包器在 package/src/extractor/用 Zstandard 壓縮格式產(chǎn)出緊湊的分發(fā)包。必須在這一層的原因JS 運行時管不了 OS 資源啟動階段每多加載一點運行時用戶就多等一點Zig 的零成本抽象和 C 互操作讓這段代碼既快又好寫。對開發(fā)者意味著你一行原生代碼都不用寫但啟動和解包這兩段最影響體感的代碼是原生的。運行時層主進程是應(yīng)用的持有者它負(fù)責(zé)主進程的事件循環(huán)、異步操作以及和頁面之間的類型化 RPC進程間通信參數(shù)帶類型檢查。必須在這一層的原因主進程擁有應(yīng)用狀態(tài)和所有原生對象頁面被隔離在獨立進程里只能通過 RPC 向主進程要服務(wù)——頁面代碼有 bug 或被人注入都夠不到它從未被授予的 API。運行時本身做小Cottontail 比 Node 和 Bun 的完整運行時都小主進程的常駐占用也跟著小。對開發(fā)者意味著UI 隨便用 Web 技術(shù)棧安全邊界不用自己搭。應(yīng)用層你只面對 TypeScript窗口、菜單、托盤、對話框、更新器都是 TS API窗口類的實現(xiàn)就一個文件package/src/sdks/main/core/BrowserWindow.ts。必須在這一層的原因把前兩層徹底藏起來開發(fā)者只學(xué)一種語言。對開發(fā)者意味著學(xué)習(xí)成本是一個 Web 項目的成本不是一個原生項目的成本。 一次操作的全鏈路創(chuàng)建一個窗口按時間順序跟一遍new BrowserWindow()之后發(fā)生的事應(yīng)用層你的 TS 代碼構(gòu)造窗口傳入尺寸、標(biāo)題等參數(shù)。運行時層主進程把請求序列化經(jīng) FFI外部函數(shù)接口JS 與 C 代碼之間的橋邊界發(fā)給原生層參數(shù)在橋兩側(cè)都有類型檢查。系統(tǒng)層Zig/C 包裝器調(diào)用操作系統(tǒng)窗口 API系統(tǒng)創(chuàng)建真實窗口。頁面系統(tǒng) webview 加載你指定的 HTML與主進程隔離。事件回傳ready、focus、resize 等事件從原生層沿事件橋回到運行時你在事件系統(tǒng)里訂閱即可。對開發(fā)者意味著一行 API 背后是三層之間的類型化往返但你只需要看到第 1 步。 Electrobun 與 Electron 性能對比倉庫文檔的原話口徑是measured in megabytes, not hundreds of them以 MB 計而不是幾百 MB。可核實的數(shù)字如下維度Electrobun傳統(tǒng) Electron量級參考安裝包體積Linux 原生包裝器實測約 1.46MB系統(tǒng) webview 版/ 約 3.47MB含 CEF 版出自倉庫 BUILD.md通常幾百 MB 級需自帶完整 Chromium Node啟動速度倉庫未公布官方數(shù)字量級上省掉了加載整套瀏覽器運行時通常快得多通常需要先啟動完整 Chromium增量更新通常 KB 級基于 Zig 優(yōu)化的 BSDIFF 二進制差分通常 MB 級安裝形態(tài)自解壓 Zstandard 壓縮通常為大體積傳統(tǒng)安裝包Electrobun 跨平臺實現(xiàn)三方分工統(tǒng)一 API 抽象sdks/main下的 TypeScript API 在三個平臺保持一致寫一套代碼。平臺特定實現(xiàn)package/src/native/下分 linux、macos、win 三棵代碼樹Linux 沒有可靠的弱鏈接機制所以構(gòu)建產(chǎn)出 GTK 版和 CEF 版兩套包裝器打包時按配置二選一。構(gòu)建腳本Hutch CLI 解析并下載所需工具鏈Zig、CEF 等一次跑完編譯、簽名與打包。 Electrobun 安裝步驟三條命令跑起來前置一步先按倉庫內(nèi)docs/src/content/docs/electrobun/guides/hutch.mdx的說明全局安裝 Hutch CLI。然后git clone https://gitcode.com/GitHub_Trending/el/electrobun cd electrobun/package npm ci hutch devhutch dev構(gòu)建本地 devkit 并運行內(nèi)置的 kitchen 測試應(yīng)用。要開始自己的項目去templates/目錄挑模板——從 hello-world、React、Svelte 到 Go、Rust、WGPU 共 30 多個最小入口看 templates/hello-world/。?? Electrobun 適合誰雙向判斷適合需要 MB 級分發(fā)、啟動快的小型工具類應(yīng)用比如編輯器、客戶端、效率軟件已掌握 TS/Web 技術(shù)棧、不想再學(xué)一套原生開發(fā)的團隊需要自動更新的產(chǎn)品更新器和 KB 級差分內(nèi)置不用自研。不適合要求三個平臺渲染像素級一致系統(tǒng) webview 引擎各不相同要一致就得開bundleCEF體積隨之漲上去深度依賴 Chromium 專有特性或指望一個十年成熟度的生態(tài)項目還年輕README 也明確寫了維護者對社區(qū) PR 不作響應(yīng)承諾。你的下一步今天從templates/里拷一份 hello-world改一行窗口標(biāo)題跑hutch dev。下午你手上就會有一個 MB 級的桌面應(yīng)用而不是開頭那個 200MB 的安裝包。【免費下載鏈接】electrobunBuild ultra fast, tiny, and cross-platform desktop apps with Typescript.項目地址: https://gitcode.com/GitHub_Trending/el/electrobun創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考