在开发 Electron 应用时，我们常常会遇到一个让人头疼的问题，那就是打包后的应用体积过大。这不仅会影响用户的下载体验，还可能占用过多的磁盘空间。接下来，我就和大家详细聊聊优化 Electron 应用打包体积的方案。
一、分析打包体积过大的原因
在着手优化之前，我们得先搞清楚为什么打包体积会过大。一般来说，有以下几个常见原因。
1. 依赖包过多
在开发过程中，我们会引入各种各样的依赖包来实现不同的功能。有些包可能体积比较大，而且有些依赖可能在应用中并不是必需的。比如，在一个简单的 Electron 记事本应用中，我们引入了一个功能强大但体积很大的富文本编辑库，而实际上我们只需要简单的文本编辑功能，这个富文本编辑库就成了多余的负担。
2. 资源文件冗余
应用中可能包含了一些不必要的资源文件，比如未使用的图片、字体文件等。举个例子，我们在开发一个音乐播放器应用时，可能会把各种格式的音乐文件图标都放到资源文件夹中，但实际上应用只支持几种常见的音乐格式，那些多余的图标文件就增加了打包体积。
3. 开发环境代码未清理
开发过程中可能会有一些调试代码、测试代码或者临时文件没有清理掉，这些也会增加打包体积。比如，我们在调试 Electron 应用的某个功能时，添加了一些日志输出代码，在正式打包时没有将其移除。
二、优化依赖包
1. 移除不必要的依赖
首先，我们要仔细检查项目中的依赖包，看看哪些是真正需要的，哪些是可以移除的。可以通过查看 package.json 文件来了解项目的依赖情况。以下是一个简单的示例，假设我们有一个 Electron 项目，package.json 文件如下：
{
"name": "electron-app",
"version": "1.0.0",
"dependencies": {
"electron": "^13.1.7",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"unused-package": "^1.0.0" // 这个包是多余的
}
}
在这个示例中，unused-package 是我们确定不需要的依赖包，我们可以使用以下命令将其移除：
npm uninstall unused-package
2. 使用轻量级替代方案
有些功能可能有多种实现方式，我们可以选择体积更小的依赖包来替代。比如，在处理日期和时间时，moment 库功能强大但体积较大，我们可以使用 day.js 来替代，它的体积更小，而且 API 和 moment 很相似。以下是使用 day.js 的示例：
// 安装 day.js
npm install day.js
// 在 Electron 主进程或渲染进程中使用
const dayjs = require('dayjs');
const now = dayjs();
console.log(now.format('YYYY-MM-DD HH:mm:ss'));
3. 按需引入依赖
对于一些支持按需引入的依赖包，我们要尽量按需引入，避免引入整个包。比如，在使用 lodash 时，我们可以只引入需要的方法，而不是引入整个 lodash 库。示例如下：
// 只引入需要的方法
const _ = require('lodash/fp/map');
const numbers = [1, 2, 3];
const squared = _.map(n => n * n, numbers);
console.log(squared);
三、清理资源文件
1. 移除未使用的图片和字体
我们可以手动检查项目中的资源文件夹，删除那些未使用的图片和字体文件。也可以使用一些工具来帮助我们找出未使用的资源。比如，在一个 Electron 应用中，我们有一个 assets 文件夹，里面包含了很多图片和字体文件，我们可以通过搜索项目代码中是否引用了这些资源来判断是否可以删除。
2. 压缩图片
对于需要保留的图片，我们可以使用图片压缩工具来减小其体积。比如，使用 imagemin 库来压缩图片。以下是一个使用 imagemin 压缩图片的示例：
const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');
(async () => {
const files = await imagemin(['assets/*.png'], {
destination: 'assets/compressed',
plugins: [
imageminPngquant({
quality: [0.6, 0.8]
})
]
});
console.log('Images optimized:', files.map(file => file.path));
})();
3. 优化字体文件
如果应用中使用了自定义字体，我们可以只包含需要的字符集，而不是整个字体文件。比如，使用 fonttools 工具来提取字体文件中需要的字符。
四、清理开发环境代码
1. 移除调试代码
在开发过程中，我们可能会添加一些调试代码，比如 console.log 语句、调试用的弹窗等。在正式打包之前，我们要把这些调试代码移除。以下是一个简单的示例，在 Electron 渲染进程中，我们有一段调试代码：
// 调试代码
console.log('This is a debug message');
// 正式代码
const element = document.getElementById('my-element');
element.textContent = 'Hello, World!';
我们只需要删除 console.log 语句即可。
2. 清理临时文件
项目中可能会生成一些临时文件，比如编译过程中产生的中间文件、缓存文件等。我们要定期清理这些临时文件。在 Electron 项目中，我们可以在 package.json 中添加一个清理脚本：
{
"scripts": {
"clean": "rm -rf temp-files"
}
}
然后使用以下命令来清理临时文件：
npm run clean
五、使用打包配置优化
1. 排除不必要的文件和文件夹
在打包时，我们可以通过配置文件来排除一些不必要的文件和文件夹。比如，在使用 electron-builder 进行打包时，我们可以在 package.json 中添加 build 配置：
{
"build": {
"asar": true,
"files": [
"!node_modules/**/*.md", // 排除 node_modules 中的 Markdown 文件
"!test/**" // 排除测试文件夹
]
}
}
2. 启用代码压缩和混淆
在打包过程中，我们可以启用代码压缩和混淆来减小代码体积。electron-builder 默认会对代码进行一定程度的压缩和混淆。我们也可以使用其他工具，比如 terser 来进一步压缩代码。以下是一个使用 terser 压缩 JavaScript 代码的示例：
const { minify } = require('terser');
const code = `function add(a, b) { return a + b; }`;
minify(code).then(result => {
console.log(result.code);
});
应用场景
优化 Electron 应用打包体积适用于各种需要发布 Electron 应用的场景。比如，当我们开发一个面向大众用户的桌面应用时，用户通常希望应用的下载速度快，占用磁盘空间小。如果应用体积过大，可能会导致用户流失。另外，对于一些需要频繁更新的应用，优化打包体积可以减少用户更新应用时的等待时间。
技术优缺点
优点
- 提高用户体验：优化打包体积可以减少用户下载和安装应用的时间，提高用户满意度。
- 节省磁盘空间：减小应用体积可以节省用户的磁盘空间，特别是对于磁盘空间有限的设备。
- 降低带宽成本：对于开发者来说，优化打包体积可以降低应用分发时的带宽成本。
缺点
- 增加开发成本：优化打包体积需要花费一定的时间和精力来分析和处理依赖、资源文件等，可能会增加开发成本。
- 可能影响功能完整性：在移除依赖或资源文件时，如果不小心可能会影响应用的功能完整性。
注意事项
- 在移除依赖包和资源文件时，一定要仔细检查，确保不会影响应用的正常运行。
- 在使用轻量级替代方案时，要确保替代方案的功能能够满足应用的需求。
- 在进行代码压缩和混淆时，要注意测试应用，避免出现压缩后代码无法正常运行的情况。
文章总结
优化 Electron 应用打包体积是一个综合性的工作，需要我们从多个方面入手。我们要分析打包体积过大的原因，然后针对性地进行优化，包括优化依赖包、清理资源文件、清理开发环境代码和使用打包配置优化等。通过这些优化措施，我们可以有效地减小 Electron 应用的打包体积，提高用户体验和应用的竞争力。
评论