如何大幅减小 Electron 应用程序体积？10 个技巧分享

如何显著减小 Electron 应用程序的体积

引言

Electron 框架因其跨平台开发能力而受到广泛欢迎，但它可能导致应用程序体积庞大。本文将探讨导致 Electron 应用程序体积大的原因，并提供详细步骤和技巧来有效减小体积。

解压 app.asar 文件

什么是 app.asar 文件？

app.asar 文件是一个归档文件，其中包含 Electron 应用程序的源文件。该文件有助于保持应用程序的紧凑和高效。

如何解压 app.asar 文件？

使用 asar 命令行工具解压 app.asar 文件：

asar extract app.asar extracted-app

查找和删除不需要的文件

解压 app.asar 文件后，仔细检查 extracted-app 目录中体积较大的文件。常见的文件类型包括：

• 图像
• 视频
• 音频
• 大文件（超过 10MB）

如果你不需要这些文件，删除它们可以显著减小应用程序体积。

使用 Electron Builder 的 asarUnpack 选项

Electron Builder 提供了 asarUnpack 选项，可以在打包应用程序时自动解压 app.asar 文件：

"asarUnpack": true

这将使你能够轻松访问和修改 app.asar 文件中的文件。

优化代码和资源

• 代码优化： 使用 webpack 的 UglifyJS 插件压缩 JavaScript 代码。
• 资源优化： 使用 brotli 压缩算法压缩资源，如图像和音频文件。

排除不需要的文件

在构建应用程序时，排除不需要的文件以减小体积：

"files": [
  "**/*",
  "!node_modules/**/*"
]

其他提示

• 使用 asar 模块打包应用程序。
• 使用 electron-packager 将 Electron 应用程序打包为可安装的应用程序。
• 监视应用程序的体积，在开发过程中使用打包工具，如 electron-builder，来跟踪体积变化。

结论

通过遵循本文中概述的步骤，你可以显着减小 Electron 应用程序的体积，从而改善用户体验并节省磁盘空间。

常见问题解答

1. 为什么 Electron 应用程序比 Windows 应用程序大？

Electron 应用程序包括 Chromium 框架，而 Windows 应用程序可能只包含应用程序特定的代码。

2. 如何确定哪些文件可以删除？

仔细检查提取的 app.asar 文件目录中的文件，删除不需要的或体积大的文件。

3. asarUnpack 选项的优点是什么？

它允许你访问和修改 app.asar 文件中的文件，方便调试和更新。

4. 优化代码和资源有什么好处？

代码和资源优化可以显著减少应用程序大小，提高性能。

5. 排除不需要的文件有什么用？

排除不需要的文件可以防止它们被打包到应用程序中，从而减小体积。