vite-electron-build

Configure Vite and Electron build pipelines with TypeScript and hot reloading.

Updated Mar 1, 2026
One-click install
npx skills add https://github.com/StevenWXY/Project-Sibylla --skill vite-electron-build
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vite-electron-build
Source: https://github.com/StevenWXY/Project-Sibylla/tree/main/.kilocode/skills/phase0/vite-electron-build
Command: npx skills add https://github.com/StevenWXY/Project-Sibylla --skill vite-electron-build

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vite + Electron 构建配置最佳实践。当需要配置 Vite 构建工具、优化 Electron 主进程与渲染进程构建、实现开发环境热重载、优化生产环境打包、或实现代码分割与懒加载时使用此 skill。

Core Features & Use Cases

  • Config optimization: Fine-tuned Vite config for Electron main and renderer processes, improved startup times, and stable HMR.
  • Production packaging: Production-ready bundling with code-splitting, asset hashing, and platform-specific packaging guidance.
  • Development workflow: Setup for parallel renderer/main development servers, type-safe TS integration, and efficient debugging.
  • Use Case: Teams building Electron apps with React/TS can adopt this guide to accelerate delivery and maintain performance.

Quick Start

Install dependencies and run the development script to start both renderer and main processes.

Frequently Asked Questions about vite-electron-build

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my Vite Electron build pipeline need code splitting and lazy loading?

Code splitting and lazy loading are needed in a Vite Electron build pipeline to optimize production bundling and improve application startup times. This ensures efficient asset delivery and performance.

How do I configure Vite and Electron for hot reloading in development?

To configure Vite and Electron hot reloading, set up parallel development servers for both renderer and main processes. This ensures type-safe TypeScript integration and efficient debugging while maintaining stable HMR during app development.

What is the best way to optimize Electron main and renderer process builds with Vite?

Optimizing Electron main and renderer process builds involves applying fine-tuned Vite configurations to improve startup times and stable HMR. This streamlines the build pipeline for both development and production environments.

Can I use Vite to handle production packaging and code splitting for Electron apps?

Yes, Vite supports production-ready Electron packaging by utilizing code splitting, asset hashing, and platform-specific packaging guidance. This approach optimizes bundling for targeted OS platforms.

Does this Vite Electron build setup require TypeScript?

Yes, a Vite-based project with Electron integration requires TypeScript support. The setup applies type-safe TS integration across parallel renderer and main development servers for efficient debugging.

Why does my Vite Electron build pipeline need code splitting and lazy loading?

Code splitting and lazy loading are needed in a Vite Electron build pipeline to optimize production bundling and improve application startup times. This ensures efficient asset delivery and performance.