search

caoxiemeihao / vite-electron-plugin

High-performance, esbuild-based Vite Electron plugin
MIT License
54 stars 7 forks source link

question: vite-electron-plugin vs vite-plugin-electron? #17

Closed johnheroy closed 2 years ago

johnheroy commented 2 years ago

As title - what are the differences between these two vite plugins for electron?

SSylow commented 2 years ago

同问，刚前几天问了alias的问题，发现这是两个不同的插件

caoxiemeihao commented 2 years ago

Need someone to help translate into English :)

vite-electron-plugin 设计原则与 tsc 保持一致！即输入多少文件，输出多少文件

  1. 转换使用 esbuild
  2. 支持 plugin，参考 Vite 插件设计，共 4 个 hooks
  3. 类 tsc 行为，意味着 Not Bundle，这点十分重要，与 Vite 的 Not Bundle 理念一致，所以速度极快。

vite-plugin-electron 使用 Vite 构建所有代码，主进程、Preload-Scripts。

  1. 可以理解与 Webpack 方案没有本质区别。

vite-plugin-electron-renderer 提供两点功能

  1. 在渲染进程中使用 Node.js
  2. 修改一些 Vite 默认配置以兼容 Electron

先定个前提，用 esbuild 的 transform 部分，而不是 build 部分。

个人倾向于 transform 方案，esbuild、swc 这种都是极快的。热重启速度不受项目大小影响 用 Vite 构建主进程只能使用 vite build 功能，但是 build 使用的是 bundle 方案(基于Rollup)。打包速度随着页面增加越来越慢。

esbuild 优势

  1. 快
  2. 简单项目配置简单，复杂项目配置繁琐 缺点
  3. esbuild 插件生态不如 Vite 多

Vite 优点

  1. 生态系统比 esbuild 强大 缺点
  2. 相对于 esbuid 慢
  3. 复杂项目配置简单
evil-shrike commented 2 years ago

+1 , it's very confusing to have both vite-electron-plugin and vite-plugin-electron

Svallinn commented 2 years ago

Using DeepL and some touch ups:

The vite-electron-plugin design principle is consistent with tsc! i.e. input as many files as you want and output as many files as you want

  1. Convert with esbuild
  2. Supports plugins, refer to Vite's plugin design, 4 hooks in total
  3. The tsc-like behavior means no-bundling, which is very important and consistent with Vite's no-bundling philosophy, therefore it's very fast

vite-plugin-electron uses Vite to build all code, main process, Preload-Scripts

vite-plugin-electron-renderer provides two features

  1. It allows the usage of Node.js and its APIs in the rendering process
  2. It modifies some of the default Vite configuration to be compatible with Electron

Let's start with the premise that the transform option of esbuild is used instead of the build option

Personally, I prefer the transform option. esbuild and swc are both extremely fast Hot reloading speed is not affected by the project's size

The main process of building with Vite can only use Vite's build feature, but building uses the bundle scheme (based on Rollup) The build speed gets slower and slower as the project's size increases

esbuild Pros

Cons

Vite Pros

Cons