跳至主要内容

Electron 是什麼？新手也看得懂的介紹與競品比較

一、Electron 到底是什麼？​

簡單來說，Electron 是一個可以讓你用「網頁技術」做出「電腦桌面軟體」的工具。

平常我們寫網頁會用到：

  • HTML（網頁的內容與結構）
  • CSS（網頁的外觀樣式）
  • JavaScript（網頁的互動邏輯）

這些原本只能在瀏覽器裡跑的東西，透過 Electron，就可以變成一個能在 Windows、Mac、Linux 上「直接點兩下開啟」的應用程式，就像一般的軟體一樣，有自己的視窗、選單、圖示，甚至可以離線使用。

你平常可能已經在用 Electron 做的軟體了，例如：

  • Visual Studio Code（程式碼編輯器）
  • Slack（團隊溝通軟體）
  • Discord（聊天軟體）
  • Notion 的桌面版

這些軟體其實內部都包了一個「瀏覽器」，只是你看不出來而已。

二、Electron 是怎麼做到的？​

Electron 的核心原理很簡單，就是把兩個東西黑進一個程式裡：

  1. Chromium：也就是 Google Chrome 瀏覽器的引擎，負責顯示你的網頁畫面。
  2. Node.js：讓 JavaScript 也能做「電腦系統層級」的事情，例如讀寫檔案、開啟視窗、存取系統資源。

也因為打包了一整個瀏覽器引擎進去，所以 Electron 做出來的軟體通常體積比較大、佔用記憶體比較多，這也是它最常被詬病的地方。

三、Electron 的優點與缺點​

優點​

  • 一套程式碼，三個平台都能用：寫一次網頁，就能在 Windows、Mac、Linux 上運作。
  • 學習門檻低：只要懂網頁開發（HTML/CSS/JS），幾乎不用學新語言。
  • 生態系成熟、資源多：用的人多、套件多、教學文件多，遇到問題很容易找到解答。
  • 跨平台 UI 一致：因為畫面都是用網頁技術畫出來的，三個系統上看起來幾乎一樣。

缺點​

  • 檔案很肥：因為內建了整個 Chromium，隨便一個小軟體可能就要 100MB 以上。
  • 吃記憶體：每個 Electron 程式都像在跑一個瀏覽器分頁，常被笑稱「開十個 Electron 軟體，記憶體就爆了」。
  • 效能不如原生軟體：對於需要極致效能的軟體（如遊戲、專業繪圖軟體），Electron 通常不是首選。

四、市面上有哪些競品？​

近年因為大家越來越在意效能與檔案大小，出現了不少想取代 Electron 的方案。以下用簡單方式介紹幾個常見的選擇。

1. Tauri​

  • 概念：跟 Electron 很像，一樣可以用網頁技術寫畫面，但它不會內建瀏覽器引擎，而是直接使用作業系統內建的瀏覽器元件（例如 Windows 的 WebView2、Mac 的 WebKit）。
  • 優點：檔案體積小很多（可能只有幾 MB，而不是上百 MB）、記憶體用量也低很多。
  • 缺點：底層使用 Rust 語言，如果要寫比較進階的系統功能，可能需要懂一點 Rust；生態系與套件數量還不如 Electron 成熟。
  • 適合誰：在意軟體體積與效能、但仍想用網頁技術做畫面的開發者。

2. NW.js（前身為 Node-Webkit）​

  • 概念：跟 Electron 是「同門師兄弟」，概念幾乎一樣，也是包了 Chromium + Node.js。
  • 差異：架構上和 Electron 略有不同，但對使用者來說感受差異不大，目前社群熱度和生態系都遠不如 Electron。
  • 適合誰：少數有特殊技術考量、或本來就熟悉 NW.js 架構的團隊。

3. Flutter（桌面版）​

  • 概念：Google 推出的跨平台框架，原本主打手機 App，現在也支援做桌面軟體。用的是 Dart 語言，畫面是 Flutter 自己畫的，不是用瀏覽器引擎。
  • 優點：效能好、畫面流暢、同一套程式碼還能直接做手機 App。
  • 缺點：要學新的語言 Dart，如果團隊本來不熟，學習成本較高。
  • 適合誰：想要「手機 + 桌面」同時兼顧、且不排斥學新語言的團隊。

4. .NET MAUI​

  • 概念：微軟推出的跨平台框架，可以用 C# 寫出 Windows、Mac、手機 App。
  • 優點：與微軟生態系（如 Visual Studio、Azure）整合度高，效能接近原生。
  • 缺點：對非 C# / .NET 背景的開發者來說，學習曲線較高；在 Mac/Linux 的支援度與成熟度仍不如 Windows。
  • 適合誰：本來就熟悉 C# 或微軟技術棧的團隊。

5. Qt​

  • 概念：歷史悠久的跨平台框架，主要用 C++ 撰寫，做出來的軟體是「真原生」程式。
  • 優點：效能最佳、檔案小、執行效率高，許多專業軟體（如部分繪圖、工程軟體）都用 Qt。
  • 缺點：要懂 C++，學習門檻明顯比前面幾個方案高；商用授權也需要額外了解。
  • 適合誰：對效能要求極高、團隊本來就有 C++ 能力的專案。

6. PWA（漸進式網頁應用程式）​

  • 概念：嚴格來說不是「桌面框架」，而是讓一般網站可以被「安裝」到桌面或手機上，外觀像 App，但本質仍是網頁，透過瀏覽器執行。
  • 優點：完全不用額外打包，使用者直接從瀏覽器「安裝」即可，幾乎沒有額外體積負擔。
  • 缺點：能使用的系統層級功能（如存取檔案系統、系統匣圖示等）比 Electron 少很多。
  • 適合誰：功能單純、不需要太多系統整合的應用程式。

五、簡單比較表​

方案使用語言體積/效能學習門檻特色
ElectronHTML/CSS/JS大、較吃資源低生態系最成熟、資源最多
TauriHTML/CSS/JS + 少量 Rust小、省資源中想要 Electron 開發體驗但更輕量
NW.jsHTML/CSS/JS大、較吃資源低概念類似 Electron，較少人用
Flutter（桌面）Dart中、效能好中高手機與桌面可共用一套程式碼
.NET MAUIC#中、效能好中高微軟生態系整合佳
QtC++小、效能最佳高真原生效能，專業軟體愛用
PWAHTML/CSS/JS極小低不算真正桌面框架，功能較受限

六、那我該選哪一個？​

可以用幾個簡單問題來幫自己判斷：

  • 你只懂網頁技術（HTML/CSS/JS），想盡快做出桌面軟體？ → 選 Electron，資源最多、最不容易卡關。

  • 你也懂網頁技術，但很在意軟體檔案大小與效能？ → 可以考慮 Tauri。

  • 你想要同一套程式碼，手機 App 和桌面軟體都能用？ → 考慮 Flutter。

  • 你的團隊本來就很熟 C# 或微軟生態系？ → 考慮 .NET MAUI。

  • 你的軟體對效能要求非常高（例如專業工具、即時運算）？ → 考慮 Qt（或其他原生方案）。

  • 你的應用功能很單純，不需要太多系統層級功能？ → 考慮直接做 PWA，省去打包與發布的麻煩。

七、總結​

Electron 之所以受歡迎，是因為它讓「會寫網頁」的人也能做出桌面軟體，門檻低、社群大、資源多。它的代價是檔案比較大、比較吃記憶體，但對大多數軟體來說，這個代價是可以接受的——這也是為什麼 VS Code、Slack、Discord 這些大型軟體至今仍選擇用它。

如果你是初學者，想快速做出一個桌面軟體，Electron 仍是目前最容易上手、資源最豐富的選擇；等你對效能或體積有更高要求時，再依需求評估 Tauri、Flutter 或其他方案，會是更務實的路徑。