Build tools

Vite

The instant dev server. Vite boots in milliseconds by serving native ES modules unbundled, and updates the browser the moment you save — no full rebuild, no reload.

Demo 01

`npm run dev` → VITE ready in 187 ms

Old bundlers had to build your entire app before the dev server could start. Vite skips that — it starts the server instantly and compiles files only as the browser requests them. Run the command and watch it boot.

zsh — my-app

Press “Run dev server” to boot Vite…

Demo 02

Hot Module Replacement (HMR)

Edit the heading text or click the counter, then change the code — Vite swaps just that module into the running page. The counter state survives; the page never reloads. Type in the input below and watch the preview update live.

App.jsx

export default function App() { return ( <div> <h1></h1> <button>count: {count}</button> </div> ) }

localhost:5173

Hello Vite

state preserved across edits:

Demo 03

Cold start: Vite vs an old bundler

A legacy bundler bundles every file up-front, so dev-server start time grows with your codebase. Vite serves ES modules on demand, so it boots in roughly the same time no matter how big the app gets. Race them.

Viteesbuild deps + ESM

—

Old bundlerbundle whole app

—

How it works

Two engines: esbuild & Rollup

In dev, Vite pre-bundles your node_modules with esbuild (written in Go — 10–100× faster than JS bundlers) and serves your own code as native ESM. For production it bundles everything with Rollup for a small, optimised output.

# scaffold a new project
npm create vite@latest my-app
cd my-app
npm install
npm run dev      # ⚡ instant dev server
npm run build    # 📦 Rollup-optimised production bundle

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 }
})

The boot terminal, the HMR preview and the cold-start race above are an interactive visual simulation built with vanilla JavaScript — the “187 ms”, the HMR swap and the timings are dramatised to mimic the real experience. The real Vite runs in your command line (npm run dev), powered by esbuild and Rollup, where it serves a genuine dev server and performs true Hot Module Replacement. The shared CSS shell provides the page styling.