Electron 和 Tauri 是兩款廣受歡迎的框架，可運用網頁技術建置桌面應用程式。兩者都讓開發人員能使用 HTML、CSS、JavaScript 及現代前端框架，建立適用於 macOS、Windows 和 Linux 的應用程式。然而，兩者在應用程式的執行方式上，採取了根本不同的做法。
Electron 在每個應用程式中隨附 Chromium 和 Node.js，提供跨作業系統一致的瀏覽器引擎與執行環境。Tauri 則採取較輕量的方式，使用作業系統現有的 WebView，搭配以 Rust 為基礎的後端。這項架構差異會影響應用程式大小、記憶體用量、效能、安全性、相容性，以及開發人員的生產力。
Tauri 經常被視為比 Electron 更現代、更輕量的替代方案。雖然它確實有其優勢，尤其是在應用程式大小和資源消耗方面，但對許多類型的桌面軟體而言，Electron 仍是很有競爭力的選擇。Visual Studio Code、Slack、Discord、Notion 和 Figma 等知名應用程式都使用 Electron。在 WebCatalog，我們也選擇以 Electron 作為跨平台桌面應用程式的基礎。
那麼，你該選擇哪個框架？比起宣告哪個框架勝出，了解兩者之間的取捨更有幫助。
Electron 與 Tauri 快速比較
在深入探討技術差異之前，先來看看這兩個框架在重要特性上的比較。
| 特性 | Electron | Tauri |
|---|---|---|
| 瀏覽器引擎 | 隨附 Chromium | 系統 WebView |
| 後端 | Node.js | Rust |
| 應用程式大小 | 通常較大 | 通常較小 |
| 基本記憶體用量 | 通常較高 | 通常較低 |
| 跨平台一致性 | 高 | 因平台而異 |
| JavaScript 生態系 | 廣泛的 Node.js 支援 | 前端 JavaScript，透過外掛程式和命令存取原生 API |
| 安全性模型 | Chromium 沙箱、情境隔離、IPC | Rust 後端、能力權限機制、IPC |
| 桌面平台 | macOS、Windows、Linux | macOS、Windows、Linux |
| 行動平台支援 | 無官方支援 | Android 和 iOS |
| 最適合的用途 | 複雜且依賴 Chromium 的桌面應用程式 | 輕量應用程式與整合原生功能的工具程式 |
這些差異主要來自一項架構決策：是要隨附瀏覽器引擎，還是依賴作業系統提供的引擎。
架構：隨附 Chromium 與系統 WebView
Electron 和 Tauri 最大的差異，在於它們如何呈現網頁內容。Electron 內含自己的 Chromium 引擎，這意味著應用程式在 macOS、Windows 和 Linux 上，基本上都使用相同的瀏覽器技術。無論使用者安裝哪種作業系統，開發人員都能依賴特定的 Chromium 版本及其支援的 Web API。
Tauri 則使用各作業系統提供的 WebView。這大幅減少了應用程式需要隨附的軟體量，但也代表同一個應用程式可能因平台不同，而使用不同的瀏覽器引擎執行。
| 平台 | Electron | Tauri |
|---|---|---|
| macOS | Chromium | WKWebView（WebKit） |
| Windows | Chromium | WebView2（Chromium） |
| Linux | Chromium | WebKitGTK |
| Android | 無官方支援 | Android WebView |
| iOS | 無官方支援 | WKWebView |
對介面簡單的應用程式而言，這些差異在實務上的影響可能很小。大多數現代前端框架都能在 Chromium 和 WebKit 上良好運作。然而，依賴特定瀏覽器 API、複雜呈現行為或進階網頁功能的應用程式，則可能遇到相容性問題。
使用 Electron 時，開發人員可以針對已知的 Chromium 版本進行測試，並將相同版本提供給使用者。使用 Tauri 時，則必須考量瀏覽器引擎之間的差異，以及系統 WebView 可能存在的版本差異。當需要偵錯只出現在特定作業系統或 Linux 發行版上的問題時，這點尤其重要。
兩種做法本身並沒有絕對的優劣。Tauri 利用電腦上已安裝的軟體來減少重複，而 Electron 則以較大的應用程式體積，換取更高的控制能力與一致性。
應用程式大小、記憶體用量與效能
Tauri 最明顯的優勢之一，就是應用程式大小。由於 Electron 隨附 Chromium 和 Node.js，即使是相對簡單的 Electron 應用程式，也可能占用數百 MB 的磁碟空間。Tauri 應用程式則依賴系統 WebView，不必在應用程式套件中包含完整的瀏覽器引擎，因此體積可以小上許多。
Tauri 的基本記憶體消耗也可能較低，尤其是背景處理作業很少的輕量應用程式。它的 Rust 後端效率很高，也不需要維持另外隨附的瀏覽器執行環境。對小型工具、筆記工具，以及介面相對簡單的應用程式來說，這些優勢可能相當顯著。
不過，應用程式較小，不一定就執行得比較快。Electron 和 Tauri 最終都使用瀏覽器引擎來呈現介面，而前端效能仍高度取決於應用程式的程式碼。效率不佳的 React 元件、耗費大量資源的 JavaScript 操作，或記憶體洩漏，無論使用哪個框架都仍然是問題。
應用程式大小與整體資源消耗之間，也有一項重要區別。Tauri 並沒有消除瀏覽器引擎，而只是改用作業系統提供的引擎。在 Windows 上，這代表依賴現代 Windows 安裝環境中通常已具備的 WebView2。在 macOS 和 Linux 上，則是依賴各自的 WebKit 實作。
若要進行有意義的效能比較，開發人員應測量：
- **應用程式大小：**下載大小與安裝後的磁碟用量。
- **啟動時間：**應用程式多快能進入可互動狀態。
- **閒置記憶體用量：**應用程式開啟但未使用時的記憶體消耗。
- **使用中的記憶體與 CPU 用量：**在實際工作負載下的資源消耗。
- **回應速度：**使用者互動時的繪製效能與延遲。
結果會因應用程式而異。Tauri 在輕量應用程式方面通常較有優勢，而 Electron 一致的 Chromium 環境，則可能讓複雜應用程式更容易進行跨平台測試與最佳化。
開發體驗與安全性
對已熟悉 JavaScript 和 TypeScript 的團隊來說，Electron 具有顯著優勢。它與 Node.js 的整合，讓開發人員能使用成熟的函式庫生態系，處理檔案系統操作、網路、資料庫、背景處理程序及作業系統功能。開發人員不一定要在技術堆疊中引入另一種程式語言，就能建置功能完善的桌面應用程式。
Tauri 的原生後端使用 Rust，帶來優異的效能、記憶體安全性，以及強大的編譯期保證。開發人員仍可使用 React、Vue、Svelte 或其他 JavaScript 框架建置介面，而 Tauri 也為許多常見的原生操作提供外掛程式和 JavaScript API。
不過，若要實作這些 API 範圍之外的功能，可能就需要撰寫 Rust 或平台專屬程式碼。對已熟悉 Rust 的團隊而言，這可能是優勢；對主要使用 TypeScript 的團隊來說，則可能增加額外的複雜度。
安全性也是這兩個框架採取不同做法的領域。Tauri 提供以能力為基礎的權限系統，旨在限制前端程式碼可存取哪些原生操作。Electron 則提供 Chromium 沙箱、情境隔離，以及限制 Node.js 和其他高權限 API 存取的控制機制。
兩個框架在設定正確時，都能支援安全的應用程式；但如果開發人員授予過多權限，或以不安全的方式處理不受信任的內容，兩者也都可能讓使用者面臨安全漏洞的風險。
另一項重要差異與安全性更新有關。Electron 開發人員有責任更新隨附的 Chromium 執行環境，並在安全性修正推出時發布新版應用程式。Tauri 通常依賴作業系統或 WebView 供應商的更新，取得瀏覽器引擎的安全性修補程式。這減輕了應用程式開發人員的部分維護責任，不過更新是否可用，仍取決於使用者的作業系統和已安裝的 WebView。
歸根究柢，安全性更取決於應用程式如何設計與維護，而不是使用哪個框架。選擇 Tauri 不會自動讓應用程式變得安全，就像選擇 Electron 也不會自動讓它變得不安全。
為什麼大型企業持續使用 Electron
儘管 Electron 的應用程式大小與資源消耗經常受到批評，它仍是大型軟體產品的熱門選擇。一些最廣泛使用的桌面應用程式就是以 Electron 建置，顯示其架構能支援數百萬人使用的複雜軟體。
例如：
| 公司 | 應用程式 |
|---|---|
| Microsoft | Visual Studio Code |
| Salesforce | Slack |
| Discord | Discord |
| Notion | Notion |
| Figma | Figma |
| Signal | Signal Desktop |
| GitHub | GitHub Desktop |
| OpenAI | ChatGPT Desktop |
這些應用程式的用途相當多元，涵蓋軟體開發、通訊、設計與生產力工具。它們的共同點，在於都需要在運用網頁技術的同時，提供功能完善的桌面體驗。
Electron 提供成熟的生態系、一致的 Chromium 執行環境，以及將網頁介面與作業系統原生功能結合的能力。它被廣泛採用，也代表開發人員能受益於多年累積的文件、開放原始碼函式庫、偵錯工具，以及常見問題的解決方案。
對大型應用程式而言，開發生產力與可維護性，可能比盡量縮小安裝套件更重要。如果多占用一百 MB 的磁碟空間，能降低跨平台工程的複雜度，並讓應用程式更容易維護，這可能是可接受的取捨。
這不代表 Electron 永遠是正確的選擇，也不代表每家公司選用它的原因都相同。不過，它持續被用於大型正式產品，顯示 Electron 仍是一個實用且成熟的選項，而不是開發人員理所當然就該汰換的過時技術。
你可以在 Electron 官方應用程式展示頁探索更多範例。
為什麼 WebCatalog 選擇 Electron
在 WebCatalog，我們使用 Electron 建置跨平台桌面應用程式，而且我們認為，就自身的特定需求而言，它仍是合適的框架。
WebCatalog 讓使用者能將網站轉為桌面應用程式，讓多個帳號各自保持登入，並在 macOS、Windows 和 Linux 上整理應用程式。傳統桌面應用程式的開發人員可以控制前端，並針對特定環境進行最佳化；但我們與此不同，需要支援大量不受我們控制的各式網站。
這些網站可能使用不同的驗證系統、儲存機制、媒體功能、瀏覽器 API 和 JavaScript 框架。在 Chromium 中正常運作的網站，在 WebKit 中的行為可能不同，而要維持多個瀏覽器引擎之間的相容性，會帶來額外的工程挑戰。
Electron 一致的 Chromium 執行環境，協助我們避開其中許多複雜問題。它讓我們能在支援的桌面平台上，提供行為可預期的瀏覽器環境，而不必依賴不同的系統 WebView。
Electron 也提供成熟的 API，可用來管理瀏覽器工作階段、Cookie、儲存空間、權限與導覽。它的工作階段分割功能對 WebCatalog 尤其有價值，因為這讓使用者能為同一個網站維持多個彼此獨立的登入工作階段。
Tauri 也能顯示遠端網站，並可透過其 WebView API、外掛程式或平台專屬整合來實作類似功能。差別在於，對以瀏覽器功能為核心的應用程式，尤其是需要支援任意第三方服務的應用程式，Electron 提供了更一致的基礎。
Linux 支援進一步強化了這項優勢。不同 Linux 發行版在可用的系統函式庫、桌面環境和軟體版本上有很大的差異。Electron 隨附的 Chromium 執行環境，排除了一項主要的差異來源；Tauri 應用程式則必須考量每個受支援發行版所提供的 WebKitGTK 環境。
這種一致性也有代價。Electron 應用程式的體積較大，而且開發人員必須謹慎管理資源消耗。在 WebCatalog，我們持續尋找降低這些額外負擔的方法。例如，我們導入了 APFS 複製來降低所產生 Mac 應用程式的磁碟用量，顯示 Electron 的部分缺點可以在不放棄此框架的情況下獲得改善。
我們的決定並不是基於 Electron 在所有情況下都優於 Tauri 的看法，而是基於產品的需求。對 WebCatalog 而言，瀏覽器相容性、跨作業系統的一致行為，以及成熟的工作階段管理功能，比盡量縮小應用程式更有價值。
Tauri 的優勢所在
儘管 WebCatalog 偏好 Electron，在許多情況下，Tauri 可能才是更好的選擇。對輕量的桌面工具程式而言，較小的應用程式套件與較低的基本資源消耗，是很有吸引力的優勢。主要顯示自有前端、原生功能需求相對簡單，而且不依賴特定瀏覽器引擎的應用程式，都能從 Tauri 的架構獲得相當大的益處。
對偏好 Rust，或希望跨平台共用原生應用程式邏輯的開發人員來說，Tauri 也很有吸引力。自 Tauri 2 起，除了桌面作業系統之外，這個框架也正式支援 Android 和 iOS。相較之下，Electron 主要是為桌面開發而設計，並未正式支援行動平台。
另一個考量是維護。Electron 一致的執行環境簡化了相容性測試，但也要求應用程式開發人員維護並更新隨附的 Chromium 版本。Tauri 將更多這類責任交由作業系統負責，因此可減輕某些應用程式的維護負擔。不過，開發人員可能需要投入更多心力，測試不同的 WebView 實作，並解決平台專屬問題。
整體開發成本比任何單一效能測試結果都更重要。一個節省記憶體、卻需要大幅增加工程投入的框架，對特定團隊來說，未必是最有效率的選擇。同樣地，如果 Tauri 能以更少的資源完成相同任務，那麼為簡單的工具程式附上龐大的 Chromium 執行環境，可能就沒有必要。
Electron 與 Tauri：你該選擇哪一個？
兩個框架都能建置可正式推出的桌面應用程式，但它們各自針對不同的優先考量進行最佳化。
| 你的優先考量 | 較適合的起點 | 原因 |
|---|---|---|
| 較小的下載與安裝大小 | Tauri | 使用系統 WebView |
| 較低的基本資源用量 | Tauri | 輕量的原生後端 |
| 跨桌面平台的一致呈現 | Electron | 隨附相同的 Chromium 引擎 |
| 廣泛的 Node.js 整合 | Electron | 內建 Node.js 執行環境 |
| 以 Rust 為基礎的原生功能 | Tauri | Rust 是主要的後端語言 |
| 顯示任意第三方網站 | Electron | 行為可預期的 Chromium 環境 |
| 複雜的瀏覽器工作階段管理 | Electron | 成熟的工作階段與分割區 API |
| 桌面與行動平台開發 | Tauri | 官方支援桌面與行動平台 |
| 盡量減少跨瀏覽器相容性測試 | Electron | 跨桌面平台的一致引擎 |
這些是一般性的建議，而非絕對規則。Electron 可以用來建置高效率的應用程式，Tauri 也能支撐功能複雜的軟體。較好的選擇取決於產品需求，以及團隊既有的專業能力。
對打造功能完善的桌面應用程式的團隊來說，Electron 成熟的生態系與實績值得認真考慮。Microsoft、Slack、Discord 和其他大型軟體開發商的採用，顯示這個框架能滿足嚴苛的正式產品需求。
同時，對於優先考量較小的二進位檔、較低的基本資源消耗、Rust 整合，或桌面與行動平台共用開發的專案，Tauri 提供了很有吸引力的替代方案。
結語
Electron 與 Tauri 的討論，經常被簡化為一個單純的比較：Electron 很大，Tauri 很小。但更有意義的區別，在於一方提供隨附且一致的執行環境，另一方則是與系統提供的 WebView 整合的輕量框架。
Electron 優先著重跨平台一致性、與 JavaScript 生態系的整合，以及對瀏覽器功能的廣泛控制。Tauri 則優先著重較小的應用程式套件、高效率的原生執行，以及與作業系統 WebView 更緊密的整合。
在 WebCatalog，我們選擇了 Electron，就像許多大型軟體公司為其桌面應用程式所做的選擇一樣。我們重視它成熟的生態系、一致的 Chromium 執行環境，以及豐富的瀏覽器功能。這些優勢協助我們建置並維護一款能在多種作業系統上支援各式網站的產品。
這並不表示 Tauri 是不好的選擇。對輕量工具程式或需求不同的應用程式而言，它的優勢可能超越 Electron。
最好的框架，不一定是執行檔最小或記憶體用量最低的那一個，而是能讓你的團隊最有效地建置、維護及改進應用程式的那一個。
