Electron 简介
Electron 的优缺点、与 Tauri / 原生 / PWA 的对比、适用场景。
Key PointsElectron 的优势是开发快、生态全、跨平台一致；劣势是体积大、内存高、启动慢。
优势
- 一套代码三平台 —— Windows、macOS、Linux 共用同一份前端
- Web 生态直接可用 —— React、Vue、Tailwind、npm 上的一切
- 系统能力完整 —— 文件、进程、注册表、串口（通过原生模块）
- 渲染一致 —— 内置 Chromium，不用担心用户浏览器版本
劣势
- 体积 —— 安装包 60–150MB，解压后 200MB+
- 内存 —— 每个窗口一个渲染进程，起步几百 MB
- 启动慢 —— 要初始化 Chromium，冷启动常以秒计
- 安全面大 —— Node 与页面同处一进程时风险很高，必须谨慎配置
横向对比
| Tauri | 原生 | PWA | ||
|---|---|---|---|---|
| UI tech | HTML/CSS/JS | HTML/CSS/JS | 平台原生 | HTML/CSS/JS |
| Renderer | 自带 Chromium | 系统 WebView | 系统原生 | 用户浏览器 |
| Size | 大 | 小 | 最小 | 无安装 |
| System API | 最全 | 较全 | 最全 | 受限 |
| Dev speed | 快 | 较快 | 慢 | 最快 |
什么时候选 Electron
Complex UI, multiple platforms, a frontend team, and deep system integration (arbitrary file paths, shell commands, hardware) — when all four hold, Electron is the least painful option.
什么时候不选
- 只要一个小工具 —— 托盘常驻、几十 MB 内存就够的场景
- 对启动时间极敏感 —— 比如截图工具、快捷启动器
- 完全不需要系统能力 —— 直接做 Web 应用或 PWA 更省事
Many teams pick Electron simply because "we only know frontend". That is a legitimate engineering call, but accept the size and memory cost up front rather than discovering a 120MB installer at release time.
优势
- 一套代码三平台 —— Windows、macOS、Linux 共用同一份前端
- Web 生态直接可用 —— React、Vue、Tailwind、npm 上的一切
- 系统能力完整 —— 文件、进程、注册表、串口（通过原生模块）
- 渲染一致 —— 内置 Chromium，不用担心用户浏览器版本
劣势
- 体积 —— 安装包 60–150MB，解压后 200MB+
- 内存 —— 每个窗口一个渲染进程，起步几百 MB
- 启动慢 —— 要初始化 Chromium，冷启动常以秒计
- 安全面大 —— Node 与页面同处一进程时风险很高，必须谨慎配置
横向对比
| Electron | Tauri | 原生 | PWA | |
|---|---|---|---|---|
| 界面技术 | HTML/CSS/JS | HTML/CSS/JS | 平台原生 | HTML/CSS/JS |
| 渲染内核 | 自带 Chromium | 系统 WebView | 系统原生 | 用户浏览器 |
| 体积 | 大 | 小 | 最小 | 无安装 |
| 系统能力 | 最全 | 较全 | 最全 | 受限 |
| 开发速度 | 快 | 较快 | 慢 | 最快 |
什么时候选 Electron
界面复杂、需要多个平台、团队是前端背景、需要深度系统集成（读写任意路径、调命令行、连硬件）——这几条同时成立时，Electron 是最省事的选择。
什么时候不选
- 只要一个小工具 —— 托盘常驻、几十 MB 内存就够的场景
- 对启动时间极敏感 —— 比如截图工具、快捷启动器
- 完全不需要系统能力 —— 直接做 Web 应用或 PWA 更省事
很多团队选 Electron 的真实理由是「我们只会前端」。这是合理的工程决策，但要提前接受体积和内存的代价，别等到发布前才发现安装包 120MB 无法接受。