如何优化基于React+Vite的Electron应用打包体积？

问题场景 #

用React+Vite+Electron开发的桌面应用，React打包后的CSS、JS、HTML体积很小，但经Electron Builder打包为Windows便携版后，最终文件体积高达168MB，优化React应用无法缩小这个打包体积。

以下是针对性的优化方案：

1. 启用Asar归档打包 #

在package.json的build配置中添加asar: true，Asar会将应用资源打包为单个归档文件，既能减少文件数量，也能实现一定程度的体积压缩，同时还能保护代码。修改后的配置片段：

"build": {
  // 保留原有配置
  "asar": true,
  // 保留原有配置
}

2. 梳理依赖与文件范围 #

• 将仅开发阶段使用的依赖移至devDependencies：比如sass，Vite打包时会将其编译为CSS，无需留在生产依赖中，移到devDependencies后可避免被打包进最终产物。
• 精准控制打包文件：当前files配置"dist/**/*"没问题，可额外添加排除规则，避免打包无用文件，比如：

"build": {
  // 保留原有配置
  "files": [
    "dist/**/*"
  ],
  "exclude": [
    "dist/**/*.scss",
    "src/**/*",
    ".git/**/*",
    "node_modules/**/*"
  ]
}

注意：排除node_modules前，要确保Electron主进程文件（dist/electron.cjs）已将依赖打包进去，避免运行时缺失模块。

3. 指定架构与启用最大压缩 #

• 仅打包目标架构：如果只需要64位版本，在win.target中明确指定架构，避免打包多架构文件：

"win": {
  "icon": "dist/icon2.ico",
  "target": [
    {
      "target": "portable",
      "arch": ["x64"]
    }
  ],
  "artifactName": "Venedolar1.0_portable.exe",
  "compression": "maximum"
}

• 启用最大压缩：在build和win配置中都添加"compression": "maximum"，让Electron Builder使用最高压缩率处理产物。

4. 使用精简版Electron #

Electron默认包含完整的Chromium和Node.js，可升级到最新稳定版Electron——新版本通常会有体积优化，同时同步升级electron-builder保证兼容性。

5. 清理主进程冗余代码 #

检查Electron主进程文件（dist/electron.cjs），移除无用的模块引入和代码逻辑，确保主进程代码尽可能精简，减少打包后的体积。

内容的提问来源于stack exchange，提问作者Gab