Front-End Build Tools

Chapter 5: Vite Build Tool

5.1 Vite Introduction

Vite is a next-generation build tool that provides fast development server and optimized production builds.

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

export default defineConfig({
    plugins: [react()],
    build: {
        outDir: 'dist',
        sourcemap: true,
        rollupOptions: {
            output: {
                manualChunks: {
                    vendor: ['react', 'react-dom'],
                    router: ['react-router-dom']
                }
            }
        }
    },
    server: {
        port: 3000,
        open: true
    }
});

5.2 Vite Advantages

• Instant server start with native ESM
• Fast HMR (Hot Module Replacement)
• Optimized production builds with Rollup
• Built-in TypeScript support
• CSS preprocessing out of the box

5.3 Vite vs Webpack

Vite: Faster dev server, simpler config, modern tooling

Webpack: More mature, extensive plugin ecosystem, more configuration options