Vite Lengkap: Fondasi yang Perlu Dipahami untuk React & Next.js

Vite adalah build tool modern yang sangat cepat untuk development. Jika kamu paham Vite, kamu akan lebih cepat ngoding, lebih paham struktur proyek, dan lebih mudah pindah antara React dan Next.js.

Artikel ini merangkum semua yang perlu dipahami agar kamu nyaman menggunakan Vite di project React, dan tahu kapan tetap butuh Next.js.

1) Vite itu apa?

Vite adalah dev server + bundler yang dirancang untuk:

• Instant start (tanpa bundling di awal)
• HMR cepat (perubahan file langsung muncul)
• Build production dengan Rollup

Kunci utamanya: dev server berbasis ES Modules. Jadi browser langsung load module, bukan menunggu bundling besar.

2) Kenapa Vite terasa jauh lebih cepat

Vite tidak meng-bundle seluruh app saat dev. Ia hanya:

• serve file yang dibutuhkan
• compile on demand

Hasilnya:

• start project cepat
• reload super cepat
• memory lebih ringan

3) Struktur project Vite (React)

Default:

my-app/
  src/
  public/
  index.html
  vite.config.ts

Catatan penting: di Vite, index.html ada di root dan jadi entry utama.

4) React + Vite: yang perlu kamu tahu

a) Install cepat

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

b) Dev server

npm run dev

c) Build production

npm run build

d) Preview build

npm run preview

5) Alias dan path import

Tambahkan alias biar import rapi:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

6) Environment variables

Vite memakai prefix VITE_:

VITE_API_URL=https://api.example.com

Akses di kode:

const api = import.meta.env.VITE_API_URL;

7) HMR (Hot Module Replacement)

Vite punya HMR yang cepat dan stabil. Jika ada bug HMR:

• cek plugin
• cek file side effects
• restart dev server

8) Optimasi build

Vite build memakai Rollup. Kamu bisa:

• split chunk manual
• reduce vendor bundle
• lazy load module

Contoh split:

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        react: ["react", "react-dom"],
      },
    },
  },
}

9) Kapan Vite cocok untuk React

Vite cocok untuk:

• SPA atau admin dashboard
• landing page + interaksi ringan
• internal tools

Vite kurang cocok jika:

• butuh SSR/SEO berat
• butuh routing server‑side

10) Jadi, bagaimana dengan Next.js?

Next.js sudah punya:

• routing bawaan
• SSR/SSG
• API routes
• image optimization

Vite tidak menggantikan Next.js. Vite cocok untuk React SPA, sementara Next.js cocok untuk web production yang butuh SEO & server rendering.

11) Perbandingan singkat

12) Checklist pemahaman Vite (praktis)

Sebelum dianggap “paham Vite”, pastikan kamu bisa:

• [ ] Buat project React dengan Vite
• [ ] Paham index.html sebagai entry
• [ ] Atur alias @
• [ ] Gunakan env VITE_
• [ ] Build dan preview production
• [ ] Tentukan kapan pilih Vite vs Next.js