electron 应用开发优秀实践

我们最终的桌面端技术选型是 Electron ，Electron 是一个可以使用 Web 技术来开发跨平台桌面应用的开发框架。

其技术组成如下：

各技术能力如下图所示：

这里说下 Electron 进程间通信技术原理：

electron 使用 IPC （interprocess communication） 在进程之间进行通信，如下图所示：

其提供了 IPC 通信模块，主进程的 ipcMain 和渲染进程的 ipcRenderer。

从 electron 源码中可以看出， ipcMain 和 ipcRenderer 都是 EventEmitter 对象，源码如下图所示：

其实这和 chromium 的框架设计有关，其对很多功能都没有宏控制，导致很难把庞大复杂的细节功能去除掉，也造成了基于 chromium 的开发框架，如 electron 、 nwjs 打出的包起步就是 100 多 M 。

综上，electron 具有跨端、基于 Web 、超强生态等优点，是桌面端开发的优秀方案之一。下文将介绍 electron 应用开发实践经验，包括应用技术选型和常用功能。

2.1 编程语言 Typescript

理由如下：

• 针对开发者

2.2 构建工具 Electron-Forge

理由：简单而又强大，目前 electron 应用最好的构建工具之一。

这里提一下 electron-builder 其和 electron-forge 的介绍和区别，看下图所示：

2.3 Web 方案 Vue3 + Vite

2.4 monorepo方案 pnpm + turbo

目前的 monorepo 生态百花齐放，正确的实践方法应该是集大成法，也就是取各家之长，目前的趋势也是如此，各开源 monorepo 工具达成默契，专注自己擅长的能力。

如 pnpm 擅长依赖管理， turbo 擅长构建任务编排。遂在 monorepo 技术选型上，我选择了 pnpm 和 turbo 。

2.5 数据库 lowdb

2.6 脚本工具 zx

软件开发过程中，将一些流程和操作通过脚本来完成，可以有效地提高开发效率和幸福度。

依赖 node runtime 的优秀选择就两个：shelljs 和 zx ， 选择 zx 的理由如下：

3.1 应用图标生成

3.2 二进制文件构建

本章节内容是基于 electron-forge 阐述的，不过原理是一样的。

在开发桌面端应用时，会有场景要用到第三方的二进制程序，比如 ffmpeg 这种。在构建二进制程序时，要关注以下两个注意项：

3.3 按需构建

比如桌面应用中用到了 ffmpeg ， 它需要有 windows 、 mac 和 linux 的下载二进制。在打包的时候，如果不做按需构建，则会将 3 个二进制文件全部打到构建中，这样会让应用体积增加很多。

可以在 forge.config.js 配置文件中进行如下配置，即可完成按需构建，代码如下：

3.4 性能优化

可以看到有一个 app.asar 文件,这个文件用 asar 解压后可以看到有以下内容：

可以看出 asar 中的文件，就是我们构建后的项目代码，从图中可以看到有 node_modules 目录， 这是因为在 electron 构建机制中，会自动把 dependencies 的依赖全部打到 asar 中。

所以结合上述分析，我们的优化措施有以下4点：

1. 将 web 端构建所需的依赖全部放到 devDependencies 中，只将在 electron 端需要的依赖放到 dependencies

2. 将和生产无关的代码和文件从构建中剔除

3. 对跨平台使用的二进制文件，如 ffmpeg 进行按需构建（上文按需构建已介绍）

4. 对 node_modules 进行清理精简

这里提下第 4 点，如何对 node_modules 进行清理精简呢？

如果是 yarn 安装的依赖，我们可以在根目录使用下面命令进行精简：

至此，构建功能就介绍完了。

本章节主要分为以下两个方面：

1. 全量更新

2. 增量更新

下面将依次介绍上述两种更新

4.1 全量更新

通过下载最新的包或者 zip 文件，进行软件更新，需要替换所有的文件。

整体设计流程图如下：

4.2 增量更新

全量更新和增量更新各有优势，多数情况下，采用增量更新来提高用户更新体验，同时使用全量更新作为兜底更新方案。

至此，更新功能就介绍完了。

分为以下3个方面：

1. 构建优化

2. 启动时优化

3. 运行时优化

构建优化在上文内容中，已经详细介绍过了，这里不再介绍，下面将介绍 启动时优化 和 运行时优化。

5.1 启动时优化

使用 V8 缓存数据，为什么要这么做呢？

因为 electorn 使用 V8 引擎运行 js ， V8 运行 js 时，需要先进行解析和编译，再执行代码。其中，解析和编译过程消耗时间多，经常导致性能瓶颈。而 V8 缓存功能，可以将编译后的字节码缓存起来，省去下一次解析、编译的时间。

主要使用 v8-compile-cache 来缓存编译的代码，做法很简单：在需要缓存的地方加一行

require('v8-compile-cache')

其他使用方法请查看此链接文档 

https://www.npmjs.com/package/v8-compile-cache(opens new window)

5.2 运行时优化

通过以上代码，将耗时、计算量大的功能，放在 server.js ，然后再 fork 到新开 node 进程中进行处理。

至此，性能优化就介绍完了。

本章节主要介绍以下3个方面：

1. 自动化测试

2. 崩溃监控

3. 崩溃治理

下面将会依次介绍上述内容。

6.1 自动化测试

上图是做自动化测试一个完整步骤，大家可以看图领会。

自动化测试主要分为 单元测试、集成测试、端到端测试，三者关系如下图所示：

一般情况下，作为软件工程师，我们做到一定的单元测试就可以了。而且从我目前经验来说，如果是写业务性质的项目，基本上不会编写测试相关的代码。自动化测试主要是用来编写库、框架、组件等需要作为单独个体提供给他人使用的。

electron 的测试工具推荐 vitest 、 spectron 。具体用法参考官网文档即可，没什么特别的技巧。

6.2 崩溃监控

6.3 崩溃治理

俗话说的好，安全大于天，保证 electron 应用的安全也是一项重要的事情，本章节将安全分为以下 5 个方面：

1. 源码泄漏

2. asar

3. 源码保护
   

4. 应用安全
   

5. 编码安全

下面将会依次介绍上述内容。

7.1 源码泄漏

目前 electron 在源码安全做的不好，官方只用 asar 做了一下很没用的源码保护，到底有多没用呢？

你只需要下载 asar 工具，然后对 asar 文件进行解压就可以得到里面的源码了，如下图所示：

7.2 asar

7.3 源码保护

此时我们加上 napi 装饰代码，如下所示：

use napi_derive::napi;
#[napi]fn sum(a: f64, b: f64) -> f64 {  a + b}

在通过 napi-cli 将上述代码编译成 node 可以调用的二进制代码。

编译后，在electron使用上述代码，如下所示：

napi-rs 的使用请阅读官方文档，地址是：https://napi.rs/(opens new window)

至此，language bindings 的阐述就完成了。我们通过这种方式，可以完成对重要功能的源码保护。

7.4 应用安全

7.5 编码安全

主要有以下措施：

• 常用的 web 安全，比如防 xss 、 csrf

• 设置 node 可执行环境

• 窗体开启安全选项

• 限制链接跳转

以上具体细节不再介绍，自行搜索上述方案。除此之外，还有个官方推荐的最佳安全实践，有空可以看看，地址如下：

https://www.electronjs.org/docs/latest/tutorial/security(opens new window)

至此，安全这块就介绍完了。