Vite

A modern, fast build tool for frontend development that provides instant server start and lightning-fast hot module replacement (HMR).

Overview

Vite (French for "fast") is a build tool that significantly improves the frontend development experience. It leverages native ES modules and modern browser features to provide near-instant server start times and incredibly fast hot module replacement, making development much faster compared to traditional bundlers.

Example

javascript
// vite.config.js
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
  }
});

// package.json scripts
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Key Points

  • Extremely fast development server
  • Native ES modules in development
  • Hot Module Replacement (HMR)
  • Optimized production builds with Rollup
  • Supports React, Vue, Svelte, and more

Learn More