Vite Untuk Pemula

Langkah 1: Buat Project

# Buat project baru dengan template React + TypeScript
npm create vite@latest my-app -- --template react-ts

# Masuk ke direktori project
cd my-app

# Install dependencies
npm install

# Jalankan dev server
npm run dev

Dev server langsung nyala di http://localhost:5173. Dari titik nol sampai server berjalan — kurang dari 10 detik.

Langkah 2: Struktur Project

Project Vite punya struktur yang sederhana dan intuitif:

my-app/
├── index.html        ← Entry point (di root, bukan di public/)
├── src/
│   ├── main.tsx      ← Entry JavaScript/TypeScript
│   ├── App.tsx       ← Komponen utama
│   └── App.css       ← Styles
├── public/           ← Static assets
├── package.json
├── tsconfig.json     ← TypeScript config (jika template TS)
└── vite.config.ts    ← Konfigurasi Vite

Perbedaan penting dari Create React App: index.html berada di root project, bukan di folder public. Ini karena Vite memproses HTML sebagai bagian dari build pipeline — Anda bisa menambahkan EJS template atau plugin transformasi di dalamnya.

Langkah 3: Konfigurasi Dasar

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,        // Port custom
    open: true,        // Auto-open browser
  },
  build: {
    outDir: 'dist',    // Output folder untuk production
    sourcemap: true,   // Generate source maps
  },
})

Konfigurasi di atas sudah cukup untuk kebanyakan project. Dibandingkan Webpack yang butuh ratusan baris config, ini perbedaan yang sangat terasa.

Build untuk Production

Saat Anda siap deploy, satu perintah menghasilkan bundle produksi yang ter-optimasi:

npm run build

Vite menghasilkan output di folder dist/ dengan:

• Code splitting otomatis — setiap route jadi chunk terpisah
• Tree shaking — kode yang tidak dipakai dihapus
• Asset optimization — gambar, font, CSS di-minify
• CSS code splitting — CSS dimuat per halaman, bukan satu file besar
• Async chunk loading — modul dimuat saat dibutuhkan

Untuk preview hasil build secara lokal:

npm run preview

Perkembangan terbaru: Vite kini menggunakan Rolldown — bundler berbasis Rust yang menggantikan Rollup. Kecepatan build naik 3-5x untuk project besar. Rolldown juga membawa fitur baru seperti improved tree shaking dan better chunk splitting.

Perbandingan dengan Alternatif

Beberapa tool sering dibandingkan dengan Vite:

• Webpack — Paling fleksibel tapi paling lambat. Cocok untuk project legacy yang butuh plugin ekstensif. Startup 24x lebih lambat dari Vite pada project besar.
• Turbopack — Dibuat oleh Vercel untuk Next.js. Berbasis Rust, sangat cepat. Tapi terikat ekosistem Next.js, tidak bisa dipakai mandiri.
• esbuild — Sangat cepat (ditulis dalam Go). Tapi fitur plugin terbatas dan tidak punya dev server dengan HMR. Vite justru pakai esbuild di belakang layar.
• Parcel — Zero-config seperti Vite tapi lebih lambat. Komunitas dan plugin ecosystem lebih kecil.

Vite unggul di kombinasi kecepatan, fleksibilitas, dan kemudahan. Ekosistem plugin-nya yang besar dan dukungan multi-framework membuatnya jadi pilihan default untuk project baru di 2026.

Bagi yang tertarik dengan tren pengembangan web terbaru, baca juga Tren Web Development 2026: AI Mengubah Cara Membangun Website.

Integrasi dengan Framework Populer

React

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

Vite + React adalah kombinasi paling populer. @vitejs/plugin-react menangani Fast Refresh (versi HMR untuk React). Tanpa perlu react-scripts — ringan dan cepat.

Vue

npm create vite@latest my-vue-app -- --template vue-ts

Vue dan Vite adalah pasangan natural — Evan You membuat keduanya. Vue SFC (Single File Component) langsung di-compile tanpa konfigurasi. SvelteKit dan Nuxt juga dibangun di atas Vite.

Svelte

npm create vite@latest my-svelte-app -- --template svelte-ts

Svelte compiler terintegrasi sempurna. HMR bekerja untuk setiap reactive statement dan component update.

Untuk yang ingin membangun full-stack app modern dengan React, baca juga React Server Components: Panduan Lengkap Arsitektur Modern React 2026.

Optimasi dan Best Practices

Dependency Pre-Bundling

Vite secara otomatis pre-bundle dependencies besar menggunakan esbuild. Ini menghindari "dependency flooding" — ratusan request kecil yang memperlambat dev server. Jika ada dependency yang perlu di-pre-bundle secara manual:

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'date-fns'],
  },
})

Environment Variables

Vite membaca variabel environment dari file .env dengan prefix VITE_:

# .env.local
VITE_API_URL=https://api.example.com
VITE_APP_VERSION=1.0.0

// Akses di kode
const apiUrl = import.meta.env.VITE_API_URL
const version = import.meta.env.VITE_APP_VERSION

Hanya variabel dengan prefix VITE_ yang terekspos ke client. Ini fitur keamanan yang mencegah secret bocor ke browser.

Path Alias

// vite.config.ts
import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
})

Sekarang Anda bisa import dengan path absolut: import Button from '@/components/Button' alih-alih relative path yang berbelit.

Tips optimasi build Docker untuk production deployment bisa ditemukan di Optimasi Build Docker Next.js Produksi — prinsipnya sama untuk Vite.

Pertanyaan yang Sering Diajukan (FAQ)

Kesimpulan

Vite mengubah cara developer membangun web. Startup instan, HMR secepat kilat, dan konfigurasi minimal — semua ini tanpa mengorbankan fitur production. Dukungan untuk semua framework utama dan ekosistem plugin yang terus berkembang menjadikannya tool yang relevan untuk tahun-tahun ke depan.

Untuk pemula yang baru mulai belajar pengembangan web: mulai dengan Vite, bukan Webpack. Dokumentasinya jelas, komunitasnya besar, dan pengembangannya jauh lebih menyenangkan.

Sumber Referensi

1. Vite Official Documentation — Getting Started. https://vite.dev/guide/
2. Why Vite — Vite Official. https://vite.dev/guide/why
3. Better Stack — Vite.js: A Beginner's Guide. https://betterstack.com/community/guides/scaling-nodejs/vitejs-explained/
4. Syncfusion — Vite vs Webpack: Choosing the Right Bundler. https://www.syncfusion.com/blogs/post/webpack-vs-vite-bundler-comparison
5. GeeksforGeeks — Getting Started with Vite. https://www.geeksforgeeks.org/javascript/getting-started-with-vite/

Image Attribution

• Photo by Ilya Pavlov on Unsplash - Unsplash
• Photo by Christopher Gower on Unsplash - Unsplash
• Photo by Stephen Dawson on Unsplash - Unsplash
• Photo by Fotis Fotopoulos on Unsplash - Unsplash