Lewati ke konten utama

Assets Laravel

Assets di Laravel merujuk pada file-file statis seperti CSS, JavaScript, gambar, dan font yang digunakan dalam aplikasi Anda. Laravel menyediakan beberapa cara untuk mengelola dan menggunakan assets ini secara efisien.

Direktori Assets

  • Secara default, assets ditempatkan di direktori public di root proyek Laravel Anda.

  • Direktori ini dapat diakses langsung oleh browser web. Laravel Mix

  • Laravel Mix adalah alat yang kuat untuk mengelola kompilasi assets.

  • Ini menyediakan API yang sederhana untuk menggunakan Webpack untuk mengkompilasi CSS, JavaScript, dan assets lainnya.

  • Laravel Mix memudahkan tugas-tugas seperti:

    • Menggabungkan dan meminimalkan file.
    • Menggunakan preprocessor CSS (Sass, Less).
    • Menggunakan transpiler JavaScript (Babel).
    • Versioning assets untuk cache busting.

Contoh Penggunaan Laravel Mix

  1. Instalasi Dependensi:
  • Pastikan Node.js dan npm (atau Yarn) terinstal.
  • Jalankan npm install untuk menginstal dependensi Laravel Mix.
  1. Konfigurasi webpack.mix.js:
  • File webpack.mix.js di root proyek Anda digunakan untuk mengonfigurasi Laravel Mix.
  • Contoh:
JavaScript

// webpack.mix.js
let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');
  1. Menjalankan Laravel Mix:
  • Jalankan npm run dev untuk kompilasi pengembangan.
  • Jalankan npm run prod untuk kompilasi produksi (minifikasi dan versioning).

Menggunakan Assets di Blade

  • Gunakan fungsi asset() untuk menghasilkan URL ke assets di direktori public.
  • Contoh:
Blade

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}"></script>
<img src="{{ asset('images/logo.png') }}" alt="Logo">

Versioning Assets

  • Laravel Mix secara otomatis menambahkan hash ke nama file assets dalam mode produksi.
  • Ini memastikan bahwa browser selalu mendapatkan versi terbaru dari assets setelah perubahan.
  • Fungsi asset() secara otomatis menangani versioning.

Tips Pengelolaan Assets

  • Gunakan Laravel Mix untuk mengelola kompilasi assets secara efisien.
  • Organisasikan assets Anda dengan baik di direktori resources dan public.
  • Gunakan versioning assets untuk cache busting.
  • Optimalkan gambar dan assets lainnya untuk mengurangi ukuran file.