Electron桌面开发专家指南：跨平台应用构建、IPC架构与性能优化

electron-pro by 404kidwiz/claude-supercode-skills

275 周安装量

61 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill electron-pro

开发 JavaScript 框架系统架构性能优化

🇨🇳中文介绍

Electron 桌面开发专家

目的

提供跨平台桌面应用程序开发的专业知识，专注于 Electron、IPC 架构和操作系统级集成。使用 Web 技术为 Windows、macOS 和 Linux 构建具备原生功能的、安全、高性能的桌面应用程序。

使用场景

构建跨平台桌面应用程序（类似 VS Code、Discord 风格）
将 Web 应用程序迁移到具备原生功能的桌面端（文件系统、通知）
实现安全的 IPC（主进程 ↔ 渲染器进程通信）
优化 Electron 内存使用和启动时间
配置自动更新器（electron-updater）
为应用商店进行应用签名和公证

2. 决策框架

架构选择

How to structure the app?
│
├─ **Security First (Recommended)**
│  ├─ Context Isolation? → **Yes** (Standard since v12)
│  ├─ Node Integration? → **No** (Never in Renderer)
│  └─ Preload Scripts? → **Yes** (Bridge API)
│
├─ **Data Persistence**
│  ├─ Simple Settings? → **electron-store** (JSON)
│  ├─ Large Datasets? → **SQLite** (`better-sqlite3` in Main process)
│  └─ User Files? → **Native File System API**
│
└─ **UI Framework**
   ├─ React/Vue/Svelte? → **Yes** (Standard SPA approach)
   ├─ Multiple Windows? → **Window Manager Pattern**
   └─ System Tray App? → **Hidden Window Pattern**

IPC 通信模式

模式

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

工作流 2：性能优化（启动）

目标： 将启动时间减少到 < 2 秒。

V8 快照
- 使用 electron-link 或 v8-compile-cache 预编译 JavaScript。
延迟加载模块
- 不要在 main.ts 文件顶部 require() 所有内容。
// Bad import { heavyLib } from 'heavy-lib';

// Good ipcMain.handle('do-work', () => { const heavyLib = require('heavy-lib'); heavyLib.process(); });
打包主进程
- 为主进程（不仅仅是渲染器进程）使用 esbuild 或 webpack，以摇树优化未使用的代码并进行压缩。

模式 1：工作线程（CPU 密集型任务）

使用场景： 处理图像或解析大文件而不冻结 UI。

// main.ts
import { Worker } from 'worker_threads';

ipcMain.handle('process-image', (event, data) => {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./worker.js', { workerData: data });
    worker.on('message', resolve);
    worker.on('error', reject);
  });
});

模式 2：深度链接（协议处理器）

使用场景： 从浏览器打开应用（myapp://open?id=123）。

// main.ts
if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('myapp', process.execPath, [path.resolve(process.argv[1])]);
  }
} else {
  app.setAsDefaultProtocolClient('myapp');
}

app.on('open-url', (event, url) => {
  event.preventDefault();
  // Parse url 'myapp://...' and navigate renderer
  mainWindow.webContents.send('navigate', url);
});

前端 UI/UX 工程师：

交接：UI 开发人员构建 React/Vue 应用 → Electron 开发人员将其封装。
协作：处理窗口控件（自定义标题栏）、模糊/亚克力效果。
工具：CSS app-region: drag。

DevOps 工程师：

交接：Electron 开发人员提供构建配置 → DevOps 设置 CI 流水线。
协作：代码签名证书（Apple Developer ID、Windows EV）。
工具：Electron Builder、公证脚本。

安全工程师：

交接：Electron 开发人员实现功能 → 安全开发人员审计 IPC 接口。
协作：定义内容安全策略（CSP）头。
工具：Electronegativity（扫描器）。

🇺🇸English

Electron Desktop Developer

Purpose

Provides cross-platform desktop application development expertise specializing in Electron, IPC architecture, and OS-level integration. Builds secure, performant desktop applications using web technologies with native capabilities for Windows, macOS, and Linux.

When to Use

Building cross-platform desktop apps (VS Code, Discord style)
Migrating web apps to desktop with native capabilities (File system, Notifications)
Implementing secure IPC (Main ↔ Renderer communication)
Optimizing Electron memory usage and startup time
Configuring auto-updaters (electron-updater)
Signing and notarizing apps for app stores

2. Decision Framework

Architecture Selection

How to structure the app?
│
├─ **Security First (Recommended)**
│  ├─ Context Isolation? → **Yes** (Standard since v12)
│  ├─ Node Integration? → **No** (Never in Renderer)
│  └─ Preload Scripts? → **Yes** (Bridge API)
│
├─ **Data Persistence**
│  ├─ Simple Settings? → **electron-store** (JSON)
│  ├─ Large Datasets? → **SQLite** (`better-sqlite3` in Main process)
│  └─ User Files? → **Native File System API**
│
└─ **UI Framework**
   ├─ React/Vue/Svelte? → **Yes** (Standard SPA approach)
   ├─ Multiple Windows? → **Window Manager Pattern**
   └─ System Tray App? → **Hidden Window Pattern**

IPC Communication Patterns

Pattern	Method	Use Case
One-Way (Renderer → Main)	`ipcRenderer.send`	logging, analytics, minimizing window
Two-Way (Request/Response)	`ipcRenderer.invoke`	DB queries, file reads, heavy computations
Main → Renderer	`webContents.send`	Menu actions, system events, push notifications

Red Flags → Escalate tosecurity-auditor:

Enabling nodeIntegration: true in production
Disabling contextIsolation
Loading remote content (https://) without strict CSP
Using remote module (Deprecated & insecure)

Workflow 2: Performance Optimization (Startup)

Goal: Reduce launch time to < 2s.

Steps:

V8 Snapshot
- Use electron-link or v8-compile-cache to pre-compile JS.
Lazy Loading Modules
- Don't require() everything at top of main.ts.

// Bad

import { heavyLib } from 'heavy-lib';

// Good
ipcMain.handle('do-work', () => {
  const heavyLib = require('heavy-lib');
  heavyLib.process();
});

3. Bundle Main Process

 * Use `esbuild` or `webpack` for Main process (not just Renderer) to tree-shake unused code and minify.

4. Patterns & Templates

Pattern 1: Worker Threads (CPU Intensive Tasks)

Use case: Image processing or parsing large files without freezing the UI.

// main.ts
import { Worker } from 'worker_threads';

ipcMain.handle('process-image', (event, data) => {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./worker.js', { workerData: data });
    worker.on('message', resolve);
    worker.on('error', reject);
  });
});

Pattern 2: Deep Linking (Protocol Handler)

Use case: Opening app from browser (myapp://open?id=123).

// main.ts
if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('myapp', process.execPath, [path.resolve(process.argv[1])]);
  }
} else {
  app.setAsDefaultProtocolClient('myapp');
}

app.on('open-url', (event, url) => {
  event.preventDefault();
  // Parse url 'myapp://...' and navigate renderer
  mainWindow.webContents.send('navigate', url);
});

6. Integration Patterns

frontend-ui-ux-engineer:

Handoff : UI Dev builds the React/Vue app → Electron Dev wraps it.
Collaboration : Handling window controls (custom title bar), vibrancy/acrylic effects.
Tools : CSS app-region: drag.

devops-engineer:

Handoff : Electron Dev provides build config → DevOps sets up CI pipeline.
Collaboration : Code signing certificates (Apple Developer ID, Windows EV).
Tools : Electron Builder, Notarization scripts.

security-engineer:

Handoff : Electron Dev implements feature → Security Dev audits IPC surface.
Collaboration : Defining Content Security Policy (CSP) headers.
Tools : Electronegativity (Scanner).

Weekly Installs

198

Repository

404kidwiz/claud…e-skills

GitHub Stars

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode169

gemini-cli152

codex151

claude-code145

github-copilot136

cursor135

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

106,200 周安装

单向（渲染器 → 主进程）	`ipcRenderer.send`	日志记录、分析、最小化窗口
双向（请求/响应）	`ipcRenderer.invoke`	数据库查询、文件读取、繁重计算
主进程 → 渲染器	`webContents.send`	菜单操作、系统事件、推送通知