Sejak Laravel versi terbaru menggunakan Vite sebagai pengganti Laravel Mix, banyak developer yang merasa sedikit kerepotan saat pertama kali menggunakannya. Jika sebelumnya cukup menjalankan satu perintah php artisan serve, kini saat proses pengembangan lokal kita juga harus menjalankan npm run dev.
Sekilas memang terlihat kurang praktis karena ada dua terminal yang harus aktif secara bersamaan. Namun sebenarnya, Vite menawarkan peningkatan performa yang jauh lebih baik dibandingkan sistem sebelumnya. Bahkan setelah terbiasa, sebagian besar developer justru lebih memilih Vite karena proses pengembangan menjadi lebih cepat dan nyaman.
Mengapa Laravel Beralih ke Vite?
Laravel mengadopsi Vite karena mampu memberikan pengalaman pengembangan yang jauh lebih modern. Dibandingkan bundler generasi sebelumnya, Vite memanfaatkan kemampuan native ES Module yang sudah didukung oleh browser modern.
Artinya, browser tidak perlu lagi melakukan proses build yang berat setiap kali ada perubahan kode. Hal inilah yang membuat waktu loading menjadi jauh lebih singkat.
Harus Menjalankan Dua Perintah
Saat mengembangkan aplikasi Laravel di komputer lokal, biasanya kita menjalankan dua perintah berikut.
php artisan serve
dan
npm run dev
Perintah pertama digunakan untuk menjalankan server Laravel, sedangkan perintah kedua digunakan untuk mengaktifkan Vite Development Server.
Bagi developer yang baru berpindah dari Laravel Mix atau framework lain, kondisi ini mungkin terasa sedikit merepotkan. Namun sebenarnya kedua proses tersebut memiliki tugas yang berbeda.
- Laravel Server bertugas menjalankan aplikasi PHP.
- Vite Server bertugas mengelola file JavaScript, CSS, Vue, React, Tailwind CSS, serta melakukan Hot Module Replacement (HMR).
Keuntungan Menggunakan Vite
1. Hot Module Replacement (HMR) Sangat Cepat
Inilah fitur yang paling disukai developer.
Ketika Anda mengubah file CSS, JavaScript, Vue, ataupun React, browser akan langsung memperbarui tampilan tanpa perlu melakukan refresh halaman secara penuh.
Perubahan dapat terlihat dalam hitungan milidetik sehingga proses coding menjadi jauh lebih efisien.
2. Build Lebih Cepat
Vite menggunakan teknologi modern berbasis ESBuild yang memiliki performa sangat tinggi.
Jika proyek mulai membesar dan memiliki ratusan file JavaScript maupun CSS, proses build tetap terasa ringan dibandingkan bundler generasi sebelumnya.
3. Pengembangan Front-End Lebih Nyaman
Laravel saat ini banyak dipadukan dengan:
- Vue.js
- React
- Tailwind CSS
- Alpine.js
- TypeScript
Seluruh teknologi tersebut didukung dengan sangat baik oleh Vite tanpa memerlukan konfigurasi yang rumit.
4. Konfigurasi Lebih Sederhana
Pada Laravel Mix, sering kali developer harus mengubah banyak konfigurasi webpack ketika proyek semakin kompleks.
Sementara itu, konfigurasi Vite relatif lebih sederhana sehingga lebih mudah dipelajari bahkan oleh pemula.
5. Mendukung Standar JavaScript Modern
Vite dirancang mengikuti perkembangan JavaScript modern sehingga kompatibilitas terhadap berbagai library terbaru menjadi lebih baik.
Hal ini membuat proyek Laravel lebih siap menghadapi perkembangan teknologi web di masa depan.
Apakah Dua Terminal Itu Benar-Benar Merepotkan?
Jawabannya tergantung kebiasaan masing-masing developer.
Pada awalnya memang terasa sedikit merepotkan karena harus membuka dua terminal.
Terminal 1
php artisan serve
Terminal 2
npm run dev
Namun setelah beberapa hari menggunakan Laravel, kebiasaan tersebut biasanya tidak lagi menjadi masalah.
Bahkan banyak editor seperti Visual Studio Code memungkinkan kita membuka beberapa terminal dalam satu jendela sehingga proses pengembangan tetap nyaman.
Tips Agar Lebih Praktis
Berikut beberapa tips agar penggunaan Vite terasa lebih nyaman.
Gunakan Terminal Terpisah
Biarkan terminal pertama selalu menjalankan Laravel, sedangkan terminal kedua khusus untuk Vite.
Gunakan VS Code Terminal Split
Visual Studio Code menyediakan fitur Split Terminal sehingga kedua proses dapat berjalan berdampingan.
Gunakan Package Concurrently
Jika ingin lebih praktis, Anda dapat menggunakan package concurrently agar dua perintah dapat dijalankan sekaligus melalui satu command.
npm install concurrently --save-dev
Contoh konfigurasi pada package.json:
"scripts": {
"dev-all": "concurrently "php artisan serve" "npm run dev""
}
Kemudian cukup menjalankan:
npm run dev-all
Dengan cara ini hanya diperlukan satu perintah untuk memulai proses development.
Kapan Perintah npm run dev Tidak Diperlukan?
Perintah tersebut hanya digunakan saat proses pengembangan (development).
Ketika aplikasi akan dipublikasikan ke server produksi, Anda cukup melakukan proses build:
npm run build
Hasil build akan disimpan pada folder yang siap digunakan oleh Laravel sehingga server produksi tidak perlu menjalankan Vite Development Server.
Kesimpulan
Meskipun Vite mengharuskan developer menjalankan dua perintah saat proses development lokal, keuntungan yang diberikan jauh lebih besar dibandingkan kerepotan tersebut. Kecepatan Hot Module Replacement, proses build yang ringan, dukungan terhadap teknologi front-end modern, serta konfigurasi yang sederhana menjadikan Vite sebagai pilihan yang sangat tepat untuk ekosistem Laravel saat ini.
Setelah terbiasa menggunakan Vite, menjalankan php artisan serve dan npm run dev secara bersamaan akan terasa sebagai bagian normal dari alur kerja sehari-hari. Bahkan bagi banyak developer, peningkatan produktivitas yang diperoleh jauh melampaui waktu tambahan yang dibutuhkan untuk membuka satu terminal lagi.
FAQ
Apakah Vite wajib digunakan di Laravel?
Secara bawaan Laravel terbaru menggunakan Vite. Anda tetap bisa menggunakan bundler lain, tetapi memerlukan konfigurasi tambahan.
Apakah npm run dev harus dijalankan di server hosting?
Tidak. Di server produksi cukup jalankan npm run build saat proses deployment. File hasil build yang akan digunakan oleh aplikasi.
Mengapa perubahan CSS tidak muncul jika hanya menjalankan php artisan serve?
Karena file aset dikelola oleh Vite. Tanpa menjalankan npm run dev, browser tidak mendapatkan pembaruan secara langsung.
Apakah Vite lebih cepat dibanding Laravel Mix?
Ya. Pada sebagian besar proyek, Vite menawarkan waktu startup, proses build, dan Hot Module Replacement yang jauh lebih cepat dibandingkan Laravel Mix berbasis Webpack.
Diskusi & Komentar