Fase 5 · API & Frontend

Vite & aset frontend

Vite mengurus dua hal: pengalaman ngoding yang cepat di lokal, dan berkas produksi yang bisa di-cache selamanya. Yang kedua penting begitu asetmu disajikan lewat CDN.

Sumber asli laravel.com Resmi Rangkuman ~5 menit baca

Intisari

@vite([...]) di Blade menghasilkan tag yang benar untuk lokal maupun produksi.
Produksi menghasilkan nama ber-hash (app-4f2a1b.js) plus manifest.json.
Nama ber-hash artinya aset boleh di-cache selamanya — isi berubah, nama berubah.
npm run build dijalankan di pipeline; public/build/ tidak ikut ke git.
Aset yang dirujuk dari CSS/JS ikut diproses; berkas di public/ tidak — itu bedanya.

Alur kerja

npm install
npm run dev        # server pengembangan, hot reload
npm run build      # berkas produksi ke public/build/

<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Direktif yang sama menghasilkan hal berbeda: saat npm run dev berjalan, ia menunjuk ke server Vite dengan hot reload; saat tidak, ia membaca manifest.json dan menunjuk ke berkas ber-hash hasil build. Kamu tidak perlu memikirkan lingkungan mana yang sedang aktif.

public/build/
├── manifest.json
└── assets/
    ├── app-4f2a1b9c.css
    └── app-8d3e7f21.js

Kenapa hash itu penting

Tanpa hash	Dengan hash
`app.css` harus di-cache pendek	`app-4f2a1b.css` boleh di-cache setahun
Pengguna bisa mendapat versi lama setelah deploy	Isi berubah → nama berubah → pasti versi baru
Perlu trik `?v=123`	Tidak perlu apa-apa

Cache-Control: public, max-age=31536000, immutable

Di Fase 9, folder public/build/ disajikan lewat CloudFront dengan header di atas. Artinya setelah kunjungan pertama, CSS dan JavaScript tidak pernah diminta lagi — tidak ke CDN, apalagi ke aplikasimu.

Konfigurasi

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,          // muat ulang browser saat Blade berubah
        }),
    ],
});

{{-- Aset yang dirujuk dari Blade dan perlu ikut diproses --}}
<img src="{{ Vite::asset('resources/images/logo.svg') }}">

Lokasi berkas	Diproses Vite?	Untuk
`resources/`	Ya — dioptimasi dan diberi hash	CSS, JS, gambar milik antarmuka
`public/`	Tidak — disalin apa adanya	`favicon.ico`, `robots.txt`, berkas yang URL-nya harus tetap

Di dalam pipeline dan kontainer

npm ci                 # bukan "npm install" — patuhi package-lock.json
npm run build

Node tidak boleh ikut ke image produksi. Di Fase 9, npm run build berjalan di stage terpisah dalam Dockerfile, dan hanya folder public/build/ yang disalin ke image akhir. Image produksi berisi PHP saja — lebih kecil, lebih cepat dimuat, dan permukaan serangannya jauh lebih sempit.

Error "Vite manifest not found". Artinya npm run build belum pernah dijalankan di lingkungan itu, atau folder public/build/ tidak ikut tersalin ke kontainer. Ini kegagalan deploy yang paling sering terjadi pada aplikasi Laravel berbasis kontainer — dan wajib dijadikan bagian dari pemeriksaan build, bukan ditemukan oleh pengguna.

Untuk halaman yang didominasi konten

Kalau sebagian besar lalu lintasmu adalah pembaca anonim, ukuran JavaScript adalah anggaran yang layak dijaga ketat. Halaman artikel yang bisa dibaca tanpa satu baris JavaScript pun akan tampil lebih cepat, lebih ramah mesin pencari, dan bisa disajikan sepenuhnya dari CDN. Pola yang sehat: HTML dari server, JavaScript hanya untuk bagian yang memang interaktif — pencarian, komentar, pemutar video.

Latihan: jalankan npm run build, buka public/build/manifest.json, dan cocokkan isinya dengan tag yang dihasilkan @vite di HTML. Lalu ubah satu baris CSS, build lagi, dan amati nama berkasnya berubah — itulah mekanisme yang membuat cache setahun jadi aman.

Rangkuman ini sengaja dipangkas ke bagian yang dipakai di roadmap. Buka sumber aslinya saat kamu butuh detail lengkap atau referensi parameter.