Server dev yang butuh 20 detik untuk restart tiap kali kamu tekan simpan itu menyebalkan. Vite menghapus rasa menyebalkan itu. Kalau kamu pernah pindah dari create-react-app, bedanya langsung kerasa di reload pertama: halaman muncul hampir seketika, dan edit komponen nggak bikin state hilang.

Vite adalah build tool bikinan Evan You, orang yang sama di balik Vue. Dia menggabungkan dua hal yang biasanya bikin lambat jadi satu: server development yang super cepat dan build production yang tetap teroptimasi. Sekarang posisinya jadi standar de facto — hampir semua framework besar menyarankan Vite sebagai starter resminya, termasuk React.

Kenapa Vite terasa begitu cepat

Rahasia utamanya ada dua. Saat development, Vite tidak membundel seluruh kode jadi satu file seperti webpack. Dia menyajikan modul lewat native ES modules langsung ke browser, jadi cuma file yang kamu buka yang dimuat. Dependensi seperti React dipre-bundle sekali pakai esbuild — tool yang ditulis di Go — lalu di-cache. Hasilnya, server nyala di bawah satu detik bahkan untuk proyek yang sudah besar.

Untuk build production, Vite berpindah ke Rollup. Rollup yang menghasilkan bundle teroptimasi dengan tree-shaking dan code-splitting. Jadi kamu dapat kecepatan dev yang instan, tapi output produksi tetap kecil dan efisien.

Setup proyek pertama

Mulai dari terminal. Pastikan Node.js minimal versi 18 terpasang, lalu jalankan:

bash
npm create vite@latest my-app -- --template react

Perintah ini men-scaffold proyek baru bernama my-app dengan template React. Kalau mau JavaScript murni, ganti react jadi vanilla; kalau mau Vue, ganti jadi vue. Lanjut install dependensi dan jalankan server dev:

bash
cd my-app
npm install
npm run dev

Buka http://localhost:5173 dan kamu sudah lihat halaman React default. Sekarang ubah src/App.jsx sedikit dan simpan — perubahannya muncul tanpa reload.

Struktur folder yang berbeda

Hal pertama yang perlu kamu tahu: di Vite, index.html ada di root proyek, bukan di dalam folder public seperti create-react-app. File ini adalah entry point sebenarnya. Script dimuat lewat <script type="module" src="/src/main.jsx">, dan Vite yang menyuntikkan HMR client ke sana.

bash
my-app/
├── index.html          # entry point, ada di root
├── package.json
├── vite.config.js      # konfigurasi Vite
└── src/
    ├── main.jsx
    ├── App.jsx
    └── App.css

Hot Module Replacement: edit tanpa reload

HMR di Vite bekerja per-modul. Kalau kamu mengubah satu komponen, hanya modul itu yang diganti di browser, dan state React kamu tetap utuh. Bandingkan dengan live reload gaya lama yang me-refresh seluruh halaman dan mengosongkan form yang lagi kamu isi.

javascript
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h1>Hitungan: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  )
}

export default App

Tambah counter ke angka 5, lalu ubah teks <h1>-nya dan simpan. Angkanya nggak balik ke 0. Itu karena Vite cuma swap modul yang berubah, bukan reload halaman.

HMR paling terasa saat kamu membangun formulir atau state yang kompleks. Kamu bisa iterasi UI tanpa kehilangan posisi scroll, input, atau state komponen. Kalau HMR terasa aneh setelah banyak edit, restart server dev — kadang cache esbuild perlu dibersihkan.

Impor CSS dan aset statis

CSS bisa diimpor langsung dari JavaScript. Vite yang menyuntikkannya ke halaman saat development, lalu mengekstraknya jadi file terpisah saat build:

javascript
import './App.css'
import logo from './assets/logo.svg'

function App() {
  return <img src={logo} alt="Logo" />
}

export default App

Perhatikan impor logo. Vite mengembalikan URL aset, dan saat build, file yang lebih kecil dari 4 KB otomatis di-inline jadi base64. Lebih besar dari itu, file di-hash dan dimasukkan ke folder assets/.

Environment variables dengan prefix VITE_

Vite cuma mengekspos variabel yang diawali VITE_ ke kode client. Ini sengaja, biar nggak ada token server yang bocor ke browser.

bash
# .env
VITE_API_URL=https://api.contoh.com
javascript
console.log(import.meta.env.VITE_API_URL)  // https://api.contoh.com
console.log(import.meta.env.MODE)          // development / production

Jangan simpan secret seperti API key database di file .env dengan prefix VITE_. Apa pun yang diawali VITE_ ikut ter-bundle ke JavaScript yang bisa dibaca siapa saja lewat DevTools. Secret server harus hidup di backend.

Konfigurasi vite.config.js: alias dan proxy

Sebagian besar kebutuhan nggak butuh konfigurasi. Tapi dua hal ini sering dipakai: alias path biar impor lebih bersih, dan proxy biar request ke API lokal nggak kena masalah CORS.

javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    proxy: {
      '/api': 'http://localhost:8000',
    },
  },
})

Dengan konfigurasi ini, impor ../../../../components/Button cukup jadi @/components/Button. Dan request dari browser ke /api diteruskan ke backend FastAPI di port 8000 tanpa CORS ribet.

Pasang Tailwind dalam satu langkah

Tailwind sekarang punya plugin resmi buat Vite, jadi nggak perlu PostCSS config yang bertele-tele.

bash
npm install tailwindcss @tailwindcss/vite
javascript
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

Lalu tambah satu baris @import "tailwindcss"; di file CSS utama kamu, dan semua utility class langsung aktif. Kalau belum paham cara pakai utility class-nya, baca panduan Tailwind CSS dari nol.

Build untuk produksi dan deploy

bash
npm run build
npm run preview

npm run build menghasilkan folder dist/ berisi file statis yang sudah di-hash dan di-tree-shake. npm run preview menyajikan hasil build secara lokal biar kamu cek sebelum upload. Folder dist/ ini yang kamu deploy ke Netlify, Vercel, atau GitHub Pages — tinggal arahkan output directory ke dist dan selesai.

Vite juga punya template TypeScript bawaan (npm create vite@latest my-app -- --template react-ts) buat kamu yang sudah nyaman dengan tipe statis — pelajari dasarnya di panduan TypeScript. Kalau kamu masih baru di React, mulai dari tutorial React dari nol dulu. Coba bikin satu halaman kecil dengan Vite hari ini — setelah server dev nyala dalam 300 milidetik, kamu nggak bakal mau balik ke bundler lama.