Vite

Why Vite?

Problems with Traditional Bundlers

// Traditional bundler workflow:
// 1. Start dev server
// 2. Bundle entire application (10s - 30s)
// 3. Serve bundled files
// 4. On file change, rebundle (1s - 5s)

// Vite workflow:
// 1. Start dev server (instant)
// 2. Serve files on-demand via native ESM
// 3. On file change, HMR updates (50ms)

Key Advantages

• Instant server start - No bundling during development
• Lightning fast HMR - Module-level updates
• Optimized builds - Uses Rollup for production
• Out-of-box features - TypeScript, JSX, CSS imports

Getting Started

Installation

# Create new project
npm create vite@latest my-app -- --template react
npm create vite@latest my-app -- --template vue
npm create vite@latest my-app -- --template vanilla-ts

# Existing project
npm install -D vite

Project Structure

my-app/
├── index.html          # Entry point
├── vite.config.js      # Configuration
├── package.json
└── src/
    ├── main.js
    ├── App.jsx
    └── assets/

Basic Configuration

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

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

Features

Native ESM in Development

// index.html
<script type="module" src="/src/main.js"></script>

// Vite serves files as native ES modules
// No bundling during development!
import { createApp } from 'vue'; // Fetched on demand
import App from './App.vue';      // Transformed but not bundled

Hot Module Replacement

// main.js
import { render } from './render';

render();

// Vite handles HMR automatically
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // Handle module update
    newModule.render();
  });
}

TypeScript Support

// No configuration needed!
// Vite supports TypeScript out of the box

import { defineComponent } from 'vue';

interface User {
  id: number;
  name: string;
}

export default defineComponent({
  setup() {
    const user: User = { id: 1, name: 'John' };
    return { user };
  }
});

CSS Features

// Import CSS directly
import './styles.css';

// CSS Modules
import styles from './Component.module.css';

// Preprocessors (install separately)
import './styles.scss';

// CSS with import.meta.glob
const modules = import.meta.glob('./styles/*.css');

Build Optimization

Code Splitting

// Automatic code splitting
// Dynamic imports create separate chunks
const Admin = () => import('./Admin.jsx');

// Vite also supports:
// - CSS code splitting
// - Preload generation
// - Asset optimization

Environment Variables

// .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

// In code
console.log(import.meta.env.VITE_API_URL);

// Access in HTML
<title>%VITE_APP_TITLE%</title>

Comparison

Feature	Vite	Webpack
Cold Start	Instant	10-30s
HMR	50ms	1-5s
Config	Minimal	Extensive
Prod Build	Rollup	Webpack
Learning Curve	Low	High

Resources

• Vite Docs
• Why Vite

Related Topics

• Webpack
• esbuild
• Rollup