Apa itu Vite? Kenapa React Developer Meninggalkan Create React App

Selamat Tinggal Waktu Tunggu yang Lama

Jika kamu belajar React beberapa tahun yang lalu, perintah pertama yang kamu pelajari pasti adalah npx create-react-app nama-project. Tiga tahun lalu, itu adalah cara paling keren. Tapi hari ini, jika kamu menggunakan perintah itu, komunitas React akan menyuruhmu berhenti dan beralih menggunakan Vite (dibaca: Fit, dari bahasa Prancis yang berarti "Cepat").

Masalah Utama Create React App (CRA)

CRA dibangun di atas teknologi bernama Webpack. Webpack bertugas membungkus (bundling) semua file komponen, CSS, dan gambarmu menjadi satu file raksasa sebelum menampilkannya di browser *localhost*.

Saat project-mu membesar, Webpack mulai kewalahan. Jika kamu menyalakan server lokal (npm start), kamu harus menunggu 10 hingga 30 detik sampai layarnya muncul (Cold Start). Parahnya lagi, jika kamu mengedit satu baris teks saja, Webpack harus merakit ulang seluruh project, sehingga browser *loading* lama hanya untuk menampilkan perubahan kecil.

Vite: Sang Penyelamat Kecepatan

Vite membuang cara kerja kuno tersebut. Alih-alih membungkus seluruh project di awal, Vite menggunakan fitur browser modern bernama Native ES Modules.

Vite TIDAK merakit seluruh aplikasi saat kamu mengetik npm run dev. Ia langsung menyalakan server dalam hitungan milidetik! Saat browser meminta halaman Homepage, Vite hanya akan menerjemahkan dan mengirim kode komponen Homepage saja secara *On-Demand* (Sesuai Permintaan).

HMR (Hot Module Replacement) Sepat Kilat

Fitur mematikan dari Vite adalah HMR-nya. Jika kamu mengubah warna tombol dari merah menjadi biru di file kodemu, Vite tidak akan me-refresh seluruh halaman browser. Ia hanya akan "menyuntikkan" *update* warna tersebut langsung ke tombol di layar browser dalam kedipan mata, sementara status aplikasi lainnya (seperti isian form yang sudah diketik) tidak akan hilang.

Kesimpulan

Vite bukan cuma untuk React. Vite bisa digunakan untuk Vue, Svelte, bahkan Vanilla JavaScript. Karena performanya yang gila-gilaan, bahkan dokumentasi resmi React kini sudah tidak merekomendasikan CRA lagi. Mulai sekarang, biasakan memulai project baru dengan perintah: npm create vite@latest.