skills.rest
OpenAEC-Foundation
OpenAEC-FoundationOFFICIAL
Explore all skills by this author →
GitHub

vite-core-architecture

Explain Vite's dev server and production build architecture for project setup.

4|Updated Mar 20, 2026
Search Tags:#architecture#vite#dev-server#esm#build-pipeline#rolldown#pre-bundling
One-click install
npx skills add https://github.com/OpenAEC-Foundation/OpenAEC-Workspace-Composer --skill vite-core-architecture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vite-core-architecture
Source: https://github.com/OpenAEC-Foundation/OpenAEC-Workspace-Composer/tree/main/.claude/skills/vite/vite-core/vite-core-architecture
Command: npx skills add https://github.com/OpenAEC-Foundation/OpenAEC-Workspace-Composer --skill vite-core-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vite's two-mode architecture (dev server vs production build) can be confusing and lead to misconfigurations during project setup; this Skill clarifies how these modes interact, why the distinction matters, and how it impacts workflow decisions.

Core Features & Use Cases

  • Explain dev-server vs build-time behavior, including native ESM serving and the absence/presence of bundling.
  • Compare side-by-side the roles of pre-bundling, bundling, and minification across Vite versions (5–8) and their impact on performance and output.
  • Provide guidance for project scaffolding, debugging performance, and educating teammates about Vite internals.

Quick Start

Create a new Vite project scaffold and read this guide to align your setup with dev-server and build pipeline best practices.

Frequently Asked Questions about vite-core-architecture

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

FAQPage Schema
How does the Vite dev server architecture work with native ESM?▼

Vite's dev server leverages native ESM by serving source files directly to the browser without bundling, enabling instant server startup and on-demand compilation for faster development feedback.

What is the difference between Vite pre-bundling and production build bundling?▼

Pre-bundling optimizes dependencies for the dev server using esbuild, while production bundling uses Rollup or Rolldown to minify and chunk output. This distinction impacts both dev performance and final build output.

Why did Vite transition from esbuild and Rollup to oxc and Rolldown?▼

Vite evolves internal tools to oxc and Rolldown to improve build pipeline performance and unify the toolchain. This transition addresses bottlenecks in JavaScript parsing and bundling across different build modes.

How do I debug Vite build performance issues in my project?▼

Debug Vite build performance by analyzing the two-mode architecture: inspect dev server pre-bundling overhead and production build bundling bottlenecks. Evaluate internal tool transitions from esbuild to oxc for optimization opportunities.

Does Vite architecture require specific Node.js or browser targets?▼

Vite architecture targets specific Node.js and browser environments to support native ESM serving and modern build pipelines. Ensuring your project scaffolding aligns with these targets prevents misconfigurations and build failures.

What are the limitations of Vite's two-mode architecture for project setup?▼

Vite's two-mode architecture can cause misconfigurations if dev server and production build behaviors are not properly aligned. Understanding the presence or absence of bundling across modes is crucial for reliable project scaffolding.

Related Skills

Explore More Software Engineering Skills→
botPhUbotPhU

vitest-testing-expert

Configure and optimize Vitest for Vite-based projects, including Jest migration.

Community
Advanced
rupamkairirupamkairi

vite-advanced

Configure Vite builds for multi-environment targets and plugin development.

Community
Advanced
Impertio-StudioImpertio-Studio
3

vite-core-architecture

Clarify Vite's two-mode architecture covering dev server and production build internals.

Official
Advanced
ripgraphicsripgraphics

vite-expert

Optimize Vite build processes and development server performance for JavaScript applications.

Community
Advanced