Vite — Cheat Sheet

Tags: vite, esbuild, rollup, hmr, build-tools, frontend

Level: intermediate

TL;DR: Fast frontend build tool powered by esbuild for dev dependency pre-bundling and Rollup for production builds. Replaces slow full-bundle dev servers with native ESM on demand.

Key concepts

Native ESM-based dev server serves source files directly to the browser without bundling.

Dev dependency pre-bundling runs via esbuild, converting CommonJS and UMD to ESM.

esbuild handles pre-bundling 10x to 100x faster than traditional JavaScript-based bundlers.

Modules compile only when requested by the browser via HTTP requests.

HMR stays fast regardless of app size because server updates only the changed module.

Production builds rely on Rollup for tree-shaking, code-splitting, and CSS extraction.

Environment variables exposed to client code require the VITE_ prefix by default.

Static assets imported in code resolve to their public hashed URLs automatically.

CSS Modules and CSS preprocessors work out of the box without complex loaders.

Plugin architecture extends the Rollup plugin interface with Vite-specific hooks.

Typical questions and ready answers

Q: How does Vite achieve near-instant server starts compared to Webpack?R: Webpack bundles the entire application before starting the dev server. Vite starts the server immediately, lets the browser request modules over native ESM, and transforms files on demand.

Q: Why does Vite use Rollup for production instead of esbuild?R: esbuild is extremely fast for compilation, but Rollup provides more mature CSS handling, advanced code-splitting, and a flexible plugin ecosystem needed for optimal production chunks.

Q: How do I expose environment variables safely to the client in Vite?R: I prefix client-facing variables with VITE_ in .env files and read them through import.meta.env.VITE_VAR_NAME instead of process.env.

Q: What is dependency pre-bundling and why is it necessary?R: It converts non-ESM dependencies into ESM and merges packages with hundreds of internal modules into single files to prevent browser network request waterfalls.

Pitfalls and common mistakes

Accessing process.env directly in client code instead of import.meta.env causes runtime crashes.

Storing client-accessible secrets under variables prefixed with VITE_ leaks sensitive credentials.

Dynamic imports with fully dynamic template strings fail because Vite cannot analyze module paths.

Relying on CommonJS globals like __dirname fails under Vite native ESM execution.

Omitting production build testing locally hides issues caused by Rollup and esbuild differences.

Snippets and commands

# Create a new Vite project
npm create vite@latest my-app -- --template react-ts

# Start dev server and build for production
npm run dev
npm run build
npm run preview

TypeScript

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

TypeScript

// Accessing typed environment variables
const apiUrl = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;

To review

[ ] Configure manual chunking in build.rollupOptions.output.

[ ] Implement path aliases using resolve.alias in vite.config.ts.

[ ] Set up reverse proxy rules in server.proxy to bypass local CORS.

[ ] Manage SSR bundle configurations and externalized dependencies.

References

Vite Official Documentation: vite.dev

Rollup Plugin API Reference: rollupjs.org

esbuild Architecture and API: esbuild.github.io

Jarvis Interviews
Jarvis