在过去的几年里Electron 与 React 的组合Yi经悄然成为桌面端开发的“黄金搭档”。它们把前端的灵活性和 Node.js 的底层Neng力揉在一起，让我们Neng够用熟悉的 HTML/CSS/JS 写出跨平台的本地程序。可是一味追求“Neng跑”往往会埋下技术债，真正想把项目Zuo大、Zuo稳，就必须走上一条系统化、可复制的工程化道路。

打开一个 Electron 窗口时系统会先启动主进程，随后为每个页面创建渲染进程。这两层之间天然形成了「隔离墙」——渲染进程只Neng在受限的沙箱里跑，除非得到主进程的授权，否则它们摸不到磁盘、打印机甚至系统对话框。

这种设计kan似繁琐，却是安全的根基：即使页面里写了恶意脚本，也只Neng在沙箱里翻滚，而不会直接敲开操作系统的大门。

上下文隔离页面脚本与预加载脚本不共享全局对象，互相kan不见。

Preload 脚本 + Context Bridge只把经过筛选的 API 暴露给页面让前端代码像使用普通库一样调用。

IPC通过 ipcRenderer.invoke / ipcMain.handle 实现请求-响应式交互，避免直接在渲染层调用 Node。

Ru果你还在让渲染进程直接 require，那就等着被警告吧——这不仅违背Zui佳实践，还会让你的应用失去安全屏障。

下面是一套经实战检验过的目录布局示例：

project-root/
│
├─ src/                     # 业务代码入口
│   ├─ main/                # 主进程模块
│   │   ├─ ipc/             # 各业务域的 IPC Handler
│   │   └─ windows/         # 窗口创建与管理
│   ├─ preload/             # Preload 脚本集合
│   └─ renderer/            # React 前端源码
│       ├─ components/
│       ├─ pages/
│       └─ store/           # Redux / MobX 等状态管理
│
├─ static/                  # 静态资源
├─ build/                   # 打包产物
└─ scripts/                 # 构建脚本、发布流水线

为什么要这么划分？

Main 与 Renderer 分离：职责单一，主进程只管系统资源和窗口生命周期；渲染层专注 UI 与业务状态。

IPC 按业务域拆包：每个文件只负责一种功Neng，例如「文件下载」「打印」或「网络请求」，这样改动时不会牵连到其他模块。

SRC 下保持统一入口：Koa 本地服务器、Webpack 多入口配置douKe以在这里找到对应的入口文件，便于一次命令完成全链路打包。

E​lectron 项目不像普通 Web 项目只有一个入口，它至少需要三套 JS 包：

Main 进程代码：electron-main

Preload 脚本：electron-preload

Renderer代码：electron-renderer

提示：Koa 本地服务也会被单独打成一个小型服务器，用来托管静态资源和提供本机 API。这样即使用户离线，也Neng通过 http://localhost:xxxx 读取图片或 PDF，而不是硬编码路径。

#webpack.config.js# 中使用多个 entry，对应上面的 three targets；每个 entry dou有自己专属的 output.path 和 target 字段。

#DefinePlugin# 用来注入不同环境变量，如 NODE_ENV、ELECTRON_BUILD_TYPE，让代码内部Ke以轻松判断当前运行的是主进程还是渲染层。

#externals# 配置 Node 原生模块，使其不被打包进入 renderer bundle，从而减小体积。

A/B 测试常常告诉我们，同步打开多个视图Neng显著提升工作效率。以投标客户端为例，我们需要同时打开「当前编辑」窗口和「历史标书」只读窗口，两者虽然共用同一套 UI 框架，却在功Neng上截然不同。

父窗口 → 子窗口：CreateWindow 自动建立层级关系；关闭父窗时子窗自动收回，防止孤儿进程残留。

只读子窗：PretendReadOnly=true 时禁用编辑相关 IPC，只保留文件预览和搜索功Neng；页面侧通过 Context Bridge 暴露一个名为 的小对象，以防误操作写入磁盘。

并行布局：Cascade 或者 Tile 两种摆放方式，douKe以通过自定义 CSS 动态计算实现，让用户自由拖拽调整大小。

别忘了在子窗关闭前记得释放 Koa 本地服务占用的端口，否则下次启动时会出现 “地址Yi被占用” 的尴尬错误。

E​lectron 应用往往因为集成了完整 Chromium 而体积偏大，但真正卡顿的大多数时候来自以下几个坑：

DPR 高分辨率导致渲染线程频繁重绘：Lighthouse 报告中出现 “Large Layout Shifts”。解决办法是开启 CSS 像素比缩放或使用虚拟列表组件。

I/O 密集型任务仍旧跑在主线程：Poorly‑designed IPC 会把大量文件读取塞给主进程。将这类任务迁移到子进程或 Worker，配合 async/await 保证 UI 不阻塞。

: 初始加载时间下降约30%。 ,

.