Series · 12 parts

Vite from Zero to Pro

Master Vite 8 from the ground up — every part ships a real config and a live, interactive demo. Start with the native-ESM mental model and your first project, then the vite.config.ts anatomy, the dev server and on-demand transform, dependency pre-bundling, HMR internals, CSS and static assets, glob imports, env vars and modes, the Rollup-compatible plugin API, production builds with Rolldown, library mode plus the SSR/Environment API, and finish with performance tuning, a capstone config, and migrating off Webpack/CRA.

01 Vite · Part 1 — The Mental Model & Your First Project

Why Vite is fast: native ESM in dev means no bundling on startup, while production still bundles with Rolldown. Scaffold your first project, understand dev vs build, and see the two-strategy design. With a dev-startup race demo.
02 Vite · Part 2 — vite.config.ts Anatomy

The Vite config top to bottom: defineConfig, plugins, root and base, resolve.alias, the dev server (port, open, proxy), define, css, and build options — plus config as a function of command and mode. With a live config builder.
03 Vite · Part 3 — The Dev Server & Native ESM

How the dev server actually works: serving source over native ESM, rewriting bare and relative imports into fetchable URLs, transforming each file on request, and why navigation only fetches the new modules. With an on-demand request demo.
04 Vite · Part 4 — Dependency Pre-bundling

Why Vite pre-bundles node_modules into .vite/deps: collapsing hundreds of module requests into one, converting CommonJS to ESM, and caching it all. Plus optimizeDeps include/exclude and when to clear the cache. With a pre-bundle visualizer.
05 Vite · Part 5 — HMR Deep Dive

How Hot Module Replacement swaps a single module without losing state: the import.meta.hot API, HMR boundaries and propagation, why some edits trigger a full reload, and framework Fast Refresh. With an HMR boundary lab.
06 Vite · Part 6 — CSS Handling

CSS in Vite with zero config: plain side-effect imports, scoped CSS Modules, built-in Sass/Less/Stylus, the ?inline query for Shadow DOM, automatic PostCSS, Lightning CSS, and code-split CSS in the build. With a CSS pipeline explorer.
07 Vite · Part 7 — Static Assets & Glob Imports

Import assets like code: the default URL form, the ?url / ?raw / ?worker queries, inlining small assets, public/ vs imported assets, and import.meta.glob for bulk imports. With an asset import explorer.
08 Vite · Part 8 — Env Vars & Modes

Environment variables in Vite: import.meta.env, the .env file cascade and priority, the critical VITE_ prefix that gates what reaches the client, built-in vars, define vs env, and custom modes. With an env & mode resolver.
09 Vite · Part 9 — Plugins

The Rollup-compatible plugin API: the hooks that matter (resolveId, load, transform), enforce (pre/post) and apply (serve/build) ordering, and writing your own virtual-module plugin. With a plugin hook timeline.
10 Vite · Part 10 — Production Builds with Rolldown

What vite build produces: the dist/ structure, automatic code splitting, manualChunks and advancedChunks for vendor splitting, asset hashing, source maps, target and minification. With a build output explorer.
11 Vite · Part 11 — Library Mode + SSR & the Environment API

Build publishable libraries with Vite (lib mode, ESM + CJS, .d.ts types, externalized peer deps, the exports map) and understand SSR plus the Environment API — the multi-runtime build model. With a library & environments explorer.
12 Vite · Part 12 — Performance, Capstone & Migration

Speed up dev and build, assemble a production-grade capstone vite.config.ts from the whole series, and migrate off Webpack or CRA step by step — with the concept-by-concept translation table. With a capstone config & migration explorer.