Why read this guide
Between "I can use it" and "I get why", this guide closes the gap.
Most Vite tutorials stop at the config surface. This guide opens every black box behind it.
Why doesn't Vite bundle in dev mode?
ESM + native browser imports · Part 1
When exactly do resolveId / load / transform fire?
Hook timing · Part 3
What does the WebSocket protocol behind import.meta.hot look like?
HMR protocol · Part 4
How do pre / default / post change plugin behavior?
Plugin order · Part 2
Why did Vite evolve from esbuild + Rollup to Rolldown?
Bundler evolution · Part 2
Fourteen parts — from getting started to source-code walk-throughs.
The spine covers bundler evolution, plugins, hooks, the Environment API and HMR. Supporting parts handle framework integration, library mode, SSR, performance and monorepos.
- PART 00
Getting started
What Vite 8 promises, and a working project in five minutes.
5 chapters▮▯▯▯ - PART 01
Core concepts
Native ESM, the unified Rolldown architecture, dep pre-bundling, the module graph.
6 chapters▮▮▯▯ - PART 02
Bundler evolutionSpine
From the esbuild + Rollup dual-engine legacy to Rolldown — handoff and compatibility layer.
5 chapters▮▮▮▯ - PART 03
Plugin systemSpine
How Vite / Rolldown / Rollup APIs relate, enforce ordering, and @vitejs/devtools.
6 chapters▮▮▯▯ - PART 04
Hooks deep diveSpine
Universal / Vite-only / Rolldown-extension hooks — the full picture and timing differences.
9 chapters▮▮▮▯ - PART 05
Environment APISpine
Multi-environment models beyond client / ssr, framework adapters and RSC-like patterns.
10 chapters▮▮▮▮ - PART 06
HMRSpine
The WebSocket protocol, import.meta.hot, and HotChannel dispatching across environments.
6 chapters▮▮▮▯ - PART 07
Production build
Rolldown chunking, lightningcss, baseline targets, Module Federation.
9 chapters▮▮▯▯ - PART 08
SSR & SSG
The new SSR model built on the Environment API, hand-rolled SSR, Wasm SSR.
4 chapters▮▮▮▯ - PART 09
Framework integration
React v6 (Oxc) / Vue / Svelte / Solid + meta-framework comparison.
6 chapters▮▮▯▯ - PART 10
Library mode
build.lib in full, type declarations, a cross-framework component library.
3 chapters▮▮▯▯ - PART 11
Monorepo engineering
pnpm workspace, cross-package dep pre-bundling, Turborepo caching strategy.
4 chapters▮▮▯▯ - PART 12
Performance
Cold start, @vitejs/devtools, HMR diagnostics, tree-shaking.
7 chapters▮▮▮▯ - PART 13
Real-world plugins
Source-code reading: auto-import / plugin-pages / plugin-react v6.
4 chapters▮▮▮▮
Ten hands-on projects
Not just understand — ship.
Virtual module plugin
Conjure a module from thin air with resolveId + load
Outcome: A publishable npm plugin scaffold
Markdown loader
Turn .md files into hot-reloadable React components
Auto i18n injection
transformIndexHtml + resolveId combo
Image optimizer plugin
Wire up sharp, emit webp / avif automatically
Rollup/Rolldown compat plugin
One codebase, runs on both Rollup and Rolldown
Env API + RSC multi-env build
Use the Environment API to split out RSC-like environments
Hand-rolled SSR (Env API)
Build an SSR app from scratch on top of the Env API
Cross-framework component library
One build, React/Vue/Svelte/Solid adapters out
Monorepo template
Mirror this site's structure: apps + packages + content
Mini auto-import
The core mechanics of unplugin-auto-import
About the author
"The guide I wish I had two years ago."
Jay (Yonjay) is a frontend engineer who has spent years on build tools and developer experience. This guide started from one observation: Vite is everywhere, but resources that explain how it actually works internally are rare.