企业官网建设流程全解析

Electron子进程的构建默认不会移除依赖中的无用代码，这与前端构建有本质区别。

下面介绍几种常用的子进程构建工具。

工具现状总览

详细对比

1. electron-webpack（不推荐）

现状：

• 维护停滞：根据搜索结果，electron-webpack 已经没有维护者，与新版 Webpack、Electron、TypeScript 不兼容
• 技术债务：锁定在 Webpack 4.x，无法升级到 Webpack 5
• 社区迁移：Expo 等官方项目已明确弃用 electron-webpack

问题：

# 版本锁定严重webpack4.46.0（最新是5.x） electron9.4.3（最新是30+） typescript3.9.9（最新是5.x）

结论：❌ 新项目绝对避免使用

2. electron-vite（强烈推荐）

官方信息：

• 作者：alex8088（活跃维护者）
• GitHub：https://github.com/alex8088/electron-vite
• 文档：https://cn-evite.netlify.app/

核心优势：

1. 完整的脚手架工具- 提供npm create @quick-start/electron一键创建项目
2. 主进程支持 Tree-shaking- 使用 Vite/Rollup 打包主进程，真正移除无用代码
3. 源码保护- 支持 V8 字节码编译保护源代码
4. TypeScript 开箱即用- 无需额外配置
5. 热更新（HMR）- 主进程和渲染进程都支持

实际使用案例：

• Floro（视觉版本控制工具）- 生产环境使用
• 小鹿线 CRM- 中国企业级应用
• Pieces App（AI 开发工具）- 官方博客推荐
• Notion、Figma 类工具- 社区大量项目采用

构建对比（主进程）：

// 传统方式（无优化）const{app,BrowserWindow}=require('electron')const_=require('lodash')// 整个 4MB 被打包// electron-vite 方式（Tree-shaking）import{app,BrowserWindow}from'electron'import{pick}from'lodash-es'// 仅打包 pick 函数（~2KB）

体积优化效果：

3. vite-plugin-electron（可选）

与 electron-vite 的区别：

选择建议：

• 已有 Vite 项目→ 使用vite-plugin-electron集成
• 新项目→ 直接使用electron-vite脚手架

注意混淆：
有两个相似插件：

• vite-plugin-electron- 基于 Vite 构建，功能完整
• vite-electron-plugin- 基于 esbuild，仅转译 TS，不打包（更快但功能弱）

推荐方案

方案 A：新项目（强烈推荐）

# 使用 electron-vite 脚手架npmcreate @quick-start/electron@latest# 选择技术栈：Vue / React / Svelte / Solid / Vanilla

优势：

• 主进程真正的 Tree-shaking 和代码压缩
• 预配置 TypeScript、ESM、热更新
• 生产环境验证（多个商业产品使用）

方案 B：已有 Vite 项目集成

npminstallvite-plugin-electron-D

配置：

// vite.config.tsimportelectronfrom'vite-plugin-electron'exportdefault{plugins:[electron({entry:'electron/main.ts',// 主进程入口onstart:(options)=>options.startup()// 热重载})]}

公司/项目使用案例

最终建议

electron-vite 是目前（2024-2025）最可靠的选择，它解决了传统 Electron 构建中主进程无法 Tree-shaking 的问题，且有多个生产环境验证的案例。