Vi

Vite

intermediate

Next generation frontend tooling.

Vite (French for 'fast') is a build tool that uses native ES modules in the browser during development — meaning no bundling step, instant server start, and HMR updates in under 50ms. Created by Evan You (Vue's creator), it's now the standard build tool for Vue, React, Svelte, and vanilla JS projects.

Dev ServerBuild ToolFrontend ToolingLibrary BuildsSSR
0%
0/6 lessons

Setup

Vite is installed automatically when you scaffold a project with `npm create vite`. You can also add it to an existing project.

Bash
# Create a new project:
npm create vite@latest my-project
# Choose: framework (React/Vue/Svelte/Vanilla) and variant (JS/TS)

cd my-project
npm install
npm run dev

Lessons

1
Why Vite?
Webpack bundles everything on start. With 10,000 modules that's 30+ seconds. Vit…
→
2
Vite Config
`vite.config.ts` is where you configure everything: plugins, path aliases, proxy…
→
3
Imports & Assets
Vite extends the native ES module system — you can import CSS, images, JSON, SVG…
→
4
Plugins & HMR
Vite's plugin API is based on Rollup's, extended with Vite-specific hooks. Most …
→
5
Build & Optimization
`npm run build` runs Rollup under the hood and produces optimized, code-split ou…
→
6
Vite Cheatsheet
Commands, config, and env handling on one page.
→