WEBKT

彻底告别“巨婴”应用：Electron-Builder 打包体积优化全指南

53 0 0 0

在跨平台桌面开发领域，Electron 凭借“一套代码多端运行”的优势成为了主流，但其背后的代价也显而易见：即便是最简单的 HelloWorld，打包后的 .exe 往往也要 60MB 起步。

对于追求极致体验的开发者来说，优化包体体积是必修课。本文将从依赖管理、打包配置、资源压缩等多个维度，手把手教你如何显著缩小 Electron 应用的安装包体积。

第一步：工欲善其事，必先“看”其器

在盲目优化之前，你必须知道包里到底装了什么。

推荐工具：

  1. asar extract：解压生成的 app.asar 文件，查看哪些文件占用了空间。
  2. webpack-bundle-analyzer / rollup-plugin-visualizer：分析前端代码构建后的依赖占比。

通过分析，你会发现 90% 的体积由以下三部分组成：

  • Electron 运行时（约 40-50MB，不可避免但可优化）
  • node_modules 中的生产环境依赖
  • 未经过压缩的图片、字体或静态资源

第二步：严格区分依赖，拒绝“负重前行”

这是最简单却最容易被忽略的一步。

核心原则： 只有运行时必须的代码才放入 dependencies，构建工具、测试框架、预处理器必须放入 devDependencies。

Electron-Builder 在打包时会自动忽略 devDependencies。请检查你的 package.json：

{
  "dependencies": {
    "sqlite3": "^5.0.0", // 运行时需要的原生模块
    "lodash": "^4.17.21" // 如果能通过 Webpack tree-shaking 引入，建议转为 dev
  },
  "devDependencies": {
    "electron": "^22.0.0",
    "electron-builder": "^23.6.0",
    "vite": "^4.0.0"
  }
}

避坑指南： 尽量使用前端构建工具（如 Vite/Webpack）将依赖打包进单个 JS 文件，这样你可以将几乎所有的 UI 库（React/Vue/AntD）都移动到 devDependencies 中。

第三步：深度压榨 Electron-Builder 配置

在 electron-builder.yml 或 package.json 的 build 字段中，通过以下配置可以大幅减重：

1. 精准控制文件包含范围 (files)

不要让打包工具盲目复制整个项目。只包含构建后的产物：

build:
  files:
    - "!node_modules/*" # 排除源码下的 node_modules
    - "dist/**/*"       # 只包含渲染进程构建后的产物
    - "out/main/**/*"   # 只包含主进程构建后的产物
    - "package.json"

2. 开启 ASAR 优化

ASAR 不仅能提升文件读取速度，还能通过特定的压缩算法减小体积：

asar: true
asarUnpack: # 必须解压出来的文件（如原生 .node 模块或大型二进制文件）
  - "**/*.node"

3. NSIS 压缩算法（针对 Windows .exe）

这是缩减 .exe 安装包体积的“大招”。将默认的压缩方式改为 lzma，虽然打包速度会变慢，但压缩率极高：

nsis:
  oneClick: false
  allowToChangeInstallationDirectory: true
  # 关键点：设置高强度压缩
  compress: true

注：LZMA 算法通常能让 100MB 的安装包减少到 70-80MB 左右。

第四步：静态资源的“降维打击”

如果你的应用包含大量图片或音视频，这里是优化的重灾区。

  1. 图片压缩：所有的图标和内置图片必须经过 ImageOptim 或 TinyPNG 压缩。
  2. 图标优化：Windows 的 icon.ico 建议只保留 16x16, 32x32, 48x48, 64x64, 128x128, 256x256 尺寸，删除不必要的中间尺寸。
  3. 按需加载：大型资源（如视频、本地数据库文件）不要打包进 asar，而是通过 extraResources 外挂，或者在运行时从 CDN 下载。

第五步：主进程与渲染进程的 Tree-shaking

很多开发者在主进程中使用 Node.js 库时直接 require。建议对主进程代码也进行混淆和打包。

使用 Vite 或 esbuild 处理主进程，可以移除未使用的代码路径。例如，原本 2MB 的主进程代码，经过压缩和 Tree-shaking 后可能只有 200KB。

终极方案：真的需要全量 Electron 吗？

如果你对包体有极致要求（例如要求 5MB 以内），那么 Electron 可能不再是最佳选择。

  • Tauri：使用 Rust 编写，调用系统原生 WebView（如 Edge WebView2），打包后的 .msi 仅 3-5MB。
  • PWA：如果应用不涉及复杂的底层 API 调用，将其转化为 PWA 应用也是一种思路。

总结 Checklist

优化项 预期效果 推荐指数
区分 devDependencies 显著减小 app.asar ⭐⭐⭐⭐⭐
files 字段精准匹配 避免混入源码和冗余文件 ⭐⭐⭐⭐⭐
NSIS LZMA 压缩 显著减小 .exe 安装包体积 ⭐⭐⭐⭐
图片 & 图标压缩 减小 1-10MB 不等 ⭐⭐⭐
主进程代码打包混淆 减小约 1MB，且增强安全性 ⭐⭐⭐

通过以上手段，通常可以将一个典型的 React+Electron 应用从 80MB+ 压榨到 50MB 左右（主要为 Electron 本体）。剩下的体积若想再砍，就得动刀 Chromium 本身了，那将是另一个深坑。

码农减重师 Electron前端性能优化打包工具

评论点评