Vite+Electron-builder构建Electron应用包体积过大问题求助

阿华AIGC实验室

2026-3-31

兄弟我太懂你这种转架构后开发体验起飞，但包体积直接“膨胀”的烦躁！Vite的热更新确实香到没朋友，但electron-builder默认把所有node_modules一股脑塞进app.asar的操作，确实能把包体积搞上去。不过完全不用手动删依赖，咱们通过配置就能精准控制，给你几个亲测有效的方案：

方案1：用`dependencies`/`devDependencies`区分依赖类型

Vite会把渲染进程用到的第三方包（比如React、Vue、UI组件库这些）直接打包进前端静态文件里，所以这些依赖根本不需要留在最终的node_modules里：

先给依赖“分家”：把渲染进程用的包全部移到devDependencies里，主进程专属的依赖（比如serialport、electron-store这类只有主进程会调用的）留在dependencies里。
electron-builder默认逻辑：只要你没开includeNodeModules: true，它只会打包dependencies里的内容，自动忽略devDependencies，这样直接就把渲染进程的依赖从安装包里剔除了。

方案2：用electron-builder的`includeNodeModules`精准过滤

如果不想动package.json的依赖分类，也可以直接在electron-builder的配置里指定要排除的渲染进程依赖：

"build": {
  "includeNodeModules": {
    "exclude": [
      "react",
      "vue",
      "antd",
      "your-renderer-dep-1",
      "your-renderer-dep-2"
    ]
  }
}

这个配置会让electron-builder打包所有node_modules，唯独排除你列出来的这些渲染进程用不上的包，精准又省心。

方案3：结合Vite主进程打包的`external`配置优化

如果你的主进程代码也是用Vite打包的（现在大部分electron-vite模板都是这么干的），可以在主进程的Vite配置里把主进程依赖设为external，让Vite不把它们打包进主进程的JS文件，再配合electron-builder的配置只打包这些必要依赖：

// 主进程的vite.config.js
export default defineConfig({
  build: {
    outDir: 'dist/electron',
    rollupOptions: {
      external: [
        'electron',
        'serialport',
        'electron-store' // 主进程用到的依赖都列在这
      ],
      output: {
        format: 'cjs'
      }
    }
  }
})

然后在electron-builder配置里开includeNodeModules: true，再配合方案2的exclude排除渲染进程依赖，就能完美只保留主进程需要的内容。

额外的体积压缩小技巧

开启electron-builder的最高压缩：在build配置里加"compression": "maximum"，它会用最高压缩率处理app.asar，能省不少空间。
打包前先清理冗余：执行rimraf node_modules && npm install --production，先安装生产环境依赖（自动忽略devDependencies），再打包，从根源减少要打包的文件。
优化Vite渲染进程打包：确保渲染进程的Vite配置开启了minify: 'terser'（比默认的esbuild压缩率更高）和tree-shake: true，进一步缩小静态文件体积：
```
// 渲染进程的vite.config.js
export default defineConfig({
  build: {
    minify: 'terser',
    rollupOptions: {
      treeshake: true
    }
  }
})
```