Performance & Optimization

Vite Basics

Vite configuration and optimization.

Why Vite?

Advantages over Webpack
• Instant dev server start
• Lightning fast HMR
• Native ES modules in dev
• Optimized build with Rollup
• Built-in TypeScript support

Basic Setup

Create new project
npm create vite@latest my-app
cd my-app
npm install
npm run dev

Commands
npm run dev // dev server
npm run build // production build
npm run preview // preview build

vite.config.js

Basic config
import { defineConfig } from vite;
import react from @vitejs/plugin-react;

export default defineConfig({
  plugins: [react()],
  base: ./,
  build: {
    outDir: dist,
    sourcemap: true
  }
});

Dev Server Config

Custom port and host
server: {
  port: 3000,
  host: 0.0.0.0,
  open: true
}

Proxy API requests
server: {
  proxy: {
    /api: {
      target: http://localhost:8080,
      changeOrigin: true
    }
  }
}