Pernah nggak, kamu lagi asyik ngoding Laravel, terus sadar bahwa setiap kali ubah satu baris CSS, kamu harus refresh manual, tunggu compile, refresh lagi, dan... capek sendiri? Nah, itulah masalah yang coba diselesaikan Vite. Di artikel ke-38 dari seri 50 Artikel Belajar Laravel ini, kita bahas tuntas cara kerja Vite sebagai pengelola aset frontend di Laravel — dan bagaimana hubungannya dengan blade component laravel yang sudah kamu pelajari sebelumnya. Kalau kamu pernah frustasi sama pipeline aset yang lambat dan ribet, artikel ini memang buat kamu.
Vite adalah build tool generasi berikutnya yang super cepat, dikembangkan oleh tim Vue.js. Di Laravel, Vite menggantikan Laravel Mix (yang dulu berbasis Webpack) sejak versi Laravel 9.19+. Vite bekerja dengan native ES modules selama development, sehingga Hot Module Replacement (HMR) bisa terjadi dalam hitungan milidetik — bukan detik.
🚀 Kenapa Vite Menggantikan Laravel Mix?
Bayangkan kamu punya dua kurir pengiriman paket. Kurir pertama (Webpack/Laravel Mix) harus membungkus semua paket, men-sortir semuanya dari awal, baru berangkat — meskipun kamu cuma ubah satu item. Kurir kedua (Vite) hanya ambil item yang berubah, langsung antar — sisanya sudah di tempat tujuan. Jauh lebih efisien, kan?
Secara teknis, Laravel Mix menggunakan Webpack yang memproses seluruh dependency graph setiap kali ada perubahan. Ini oke untuk production build, tapi sangat lambat untuk development. Vite memanfaatkan ES Modules native di browser saat development — artinya browser-lah yang menangani modul-modul tersebut, bukan bundler.
| Fitur | Laravel Mix (Webpack) | Vite (Laravel 9.19+) |
|---|---|---|
| Dev Server Start | ~10–30 detik | ~<1 detik ⚡ |
| HMR (Hot Reload) | Lambat (rebundle) | Instan (native ESM) ⚡ |
| Konfigurasi | webpack.mix.js | vite.config.js |
| Blade Directive | @vite tidak ada | @vite(['...']) ✅ |
| Production Build | npm run prod | npm run build |
🛠️ Setup Vite di Laravel: Step-by-Step dengan Blade Component Laravel
Laravel 10+ sudah include Vite secara default. Tapi mari kita pahami dari awal supaya kamu tahu persis apa yang terjadi di balik layar — dan bagaimana blade component laravel bekerja bersama pipeline aset ini.
npm install
# Cek versi Node.js kamu
node -v
vite.config.jsimport laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
@vite di Layout Blade<head>
<meta charset="UTF-8">
<title>Laravel App</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
php artisan serve
# Terminal 2 — Vite dev server (HMR aktif!)
npm run dev
npm run dev harus tetap berjalan agar HMR aktif. Kalau kamu cuma punya satu monitor, pakai tmux atau split terminal IDE-mu. Untuk production, cukup jalankan npm run build sekali saja.
🧩 Blade Component Laravel Bertemu Vite: Kolaborasi Terbaik
Salah satu keindahan arsitektur Laravel modern adalah bagaimana blade component laravel dan Vite bekerja secara komplementer. Blade component mengelola struktur HTML dan logika tampilan, sementara Vite mengelola aset CSS dan JavaScript yang dibutuhkan komponen tersebut.
Contoh nyata: kamu punya sebuah blade component untuk tombol. Daripada menulis inline style, kamu bisa gunakan kelas Tailwind atau custom CSS yang diproses Vite, lalu komponen tersebut langsung mendapat manfaat HMR saat kamu mengubah stylenya.
@props(['variant' => 'primary', 'type' => 'button'])
<button
type="{{ $type }}"
class="btn btn-{{ $variant }} {{ $attributes->get('class') }}"
{{ $attributes->except('class') }}
>
{{ $slot }}
</button>
.btn {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.25rem;
border-radius: 0.5rem;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-primary {
background: #6366f1;
color: #fff;
}
.btn-primary di app.css, Vite akan langsung memperbarui tampilan semua blade component yang menggunakan kelas tersebut — tanpa refresh halaman. Inilah kekuatan HMR!
🔬 Fitur Lanjutan Vite yang Wajib Kamu Tahu
Vite bukan sekadar "pengganti Mix yang lebih cepat." Ada fitur-fitur canggih yang bisa mengubah cara kamu bekerja dengan blade component laravel secara signifikan.
@tailwindcss/vite dan konfigurasi di vite.config.js. Tailwind bekerja optimal bersama Vite — purging CSS berjalan otomatis saat build!@ untuk merujuk ke folder resources/js tanpa path relatif yang panjang.refresh: true di plugin laravel membuat halaman auto-refresh saat file Blade berubah — mirip browser-sync!import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
import path from 'path';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
tailwindcss(),
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'resources/js'),
},
},
});
npm run build sebelum deploy ke production! Tanpa ini, file aset yang di-generate Vite tidak akan tersedia dan halaman-mu akan kehilangan semua CSS/JS. File hasil build masuk ke folder public/build/.
✅ Vite jauh lebih cepat dari Laravel Mix berkat pendekatan native ES modules
✅ Direktif
@vite menghubungkan pipeline aset ke template Blade-mu✅ Blade component laravel dan Vite bekerja sinergis — Blade mengelola struktur, Vite mengelola gaya
✅ HMR membuat proses styling menjadi real-time dan menyenangkan
✅ Selalu jalankan
npm run build sebelum deployment!
Kalau artikel ini membantu kamu, tinggalkan komentar di bawah ya! Bagian mana dari Vite yang paling menarik buatmu? Apakah kamu sudah punya pengalaman migrasi dari Laravel Mix ke Vite? Share pengalamanmu — pasti bermanfaat buat pembaca lain yang sedang berjuang di tempat yang sama. 🚀
No comments:
Post a Comment