ā” What is Vite?
Vite (pronounced veet) is a next-generation frontend build tool that significantly improves the developer experience by offering:
ā Ultra-fast development
ā Instant hot module reload (HMR)
ā Modern JavaScript support out of the box
ā Lightning-fast builds with Rollup
š ļø Why Use Vite?
Feature | Benefit |
---|---|
ā” Blazing Fast Dev Server | Uses native ES modules for instant start |
š Instant HMR | See changes as you type ā super fast |
š¦ Optimized Build | Uses Rollup for highly efficient production bundles |
š Framework Agnostic | Works with React, Vue, Svelte, Lit, Preact, etc. |
š Built-in Features | TypeScript, JSX, CSS Modules, PostCSS, Tailwind |
Ā
š§ How Vite Works
ā In Development
Serves native ES modules
No bundling
Super-fast startup and updates
ā In Production
Uses Rollup to bundle, optimize, and tree-shake your app
š Create a Project with Vite
bash
npm create vite@latest my-app
cd my-app
npm install
npm run dev
Vite will prompt you to choose a framework like:
React
Vue
Svelte
Lit
Vanilla JS / TS
āļø Vite Project Structure
css
my-app/
āā public/
ā āā favicon.svg
āā src/
ā āā main.js (or main.jsx, main.ts, etc.)
āā index.html
āā vite.config.js
š vite.config.js
Example (React)
js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
});
š„ Vite vs Webpack
Feature | Vite | Webpack |
---|---|---|
Dev Speed | ā” Instant startup | š¢ Slower |
HMR | ā Built-in, fast | ā ļø Often slower |
Config | Simple | Complex |
Build Tool | Rollup | Webpack |
Use Case | Modern apps, fast dev | Large, legacy apps |
Ā
š Framework Support
Framework | Vite Plugin |
---|---|
React | @vitejs/plugin-react |
Vue 3 | @vitejs/plugin-vue |
Svelte | @sveltejs/vite-plugin-svelte |
Lit | vite-plugin-lit |
Preact | @preact/preset-vite |
Ā
š¦ Vite + Tailwind CSS Setup (Example)
bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Add to tailwind.config.js
:
js
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']
Then import in your src/index.css
:
css
@tailwind base;
@tailwind components;
@tailwind utilities;
š§° Great for:
React, Vue, Svelte, and Preact apps
Component libraries
Jamstack or static sites
Fast prototyping
Modern browser-only apps
š Learn Vite
š Official Docs
š§© Awesome Vite Plugins