Laravel Mix Solusi Mengelola Asset Frontend Dan Mempercepat Loading Website

Dalam mengembangkan aplikasi web tentu kita tidak terlepas dari yang namanya request, apakah itu request file javascript ataupung request file css beberapa contoh request yang sering kita gunakan apalagi jika kita melakukan integrasi dengan templates di laravel bagi anda yang ingin tahu cara integrasi template di laravel silahkan klik Disini Berikut contoh Request Di Aplikasi Web Pada Umumnya :

Request CSS pada blade laravel contohnya sbb :

Requst Javascript pada blade laravel contohnya sbb :

umumnya kita akan melakukan request seperti contoh di atas namun mungkin jika file css atau js anda sedikit mungkin tidak terlalu terasa lalu bagaimana jika anda melakukan request ke banyak file css / js ? seperti ini contohnya :

Contoh Request banyak file css sbb :

Contoh Request banyak File JS Sbb :

terbayangkan aplikasi kita harus melakukan banyak sekali request.. disini lah saatnya kita menggunakan laravel mix dimana kita dapat melakukan compiling asset file menjadi hanya satu file saja contohnya sbb :

Contoh hasil compile file css sbb :

Contoh hasil compile file js sbb :

Hasil Compile tadi juga dapat kita berikan version fungsinya apa ? jadi di setiap aplikasi web ini browser akan selalu melakukan cache pada halaman web kita, sehingga jika kita melakukan perubahan pada file css / js maka di web yang sudah digunakan akan tidak langsung berubah padahal di server scriptnya sudah kita edit dengan script terbaru, disinilah fungsi version agar browser membaca file css / js sesuai version yang ada di server sehingga perubahan yang kita lakukan akan langsung berubah di browser user yang menggunakan aplikasi kita

Berikut Version file yg sudah di compile sbb :

Untuk File CSS sbb :

"/css/template.css": "/css/template.css?id=4c4a666914add4c38e74"

id yang ada di bagian akhir adalah id dari file css kita hasil compile yaitu ( 4c4a666914add4c38e74)

Untuk File JS Sbb :

"/js/template.js": "/js/template.js?id=9805cd10b0f821298fd5"

Id yang ada di bagian akhir file js merupakan id dari file js hasil compile yaitu ( 9805cd10b0f821298fd5 )

Lalu bagaimana caranya menggunakan Laravel mix di project Laravel kita ?

Berikut Cara Instalasi dan penggunan Laravel Mix Di Laravel :

Pertama kita harus pastikan di package.json kita sudah ada package Laravel Mix Buka File Package.json dan lihat apakah sudah ada file laravel mix ?

Untuk anda pengguna laravel versi 5.4 keatas maka package tersebut sudah ada otomatis, maka selanjutknya kita harus menjalankan command di terminal atau di command prompt project kita silahkan ketik command sbb :

npm install

Untuk melakukan combine baik itu file css / js buka file webpack.mix.js yang terdapat di root file project kita dan berikut contoh scriptnya sbb :

Untuk Combine File CSS menggunakan mix.styles:

mix.styles([ 'public/inspinia/css/bootstrap.min.css', 'public/inspinia/css/animate.css', ],'public/css/template.css').version();

Untuk Combine File JS Menggunakan mix.scripts :

mix.scripts([ 'public/inspinia/js/jquery-3.1.1.min.js', 'public/inspinia/js/bootstrap.js', 'public/inspinia/js/popper.min.js', 'public/inspinia/js/plugins/metisMenu/jquery.metisMenu.js', 'public/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js', 'public/inspinia/js/inspinia.js', 'public/inspinia/js/plugins/pace/pace.min.js' ], 'public/js/template.js').version();

Dan Untuk Coding Lengkapnya sbb :

Setelah itu anda dapat melakukan compiling menggunakan command sbb :

Untuk Anda yang ingin push ke production jangan lupa untuk jalankan command berikut :

npm run production

maka hasil compile dapat anda dilihat di dalam file
public > mix-manifest.json sbb :

Dan Berikut Isi dari file mix-manifest.json :

{ "/js/app.js": "/js/app.js?id=d96dbf7fdc6e3b852c7a", "/css/app.css": "/css/app.css?id=3d4f06a53acc7b228bcc", "/css/template.css": "/css/template.css?id=4c4a666914add4c38e74", "/js/template.js": "/js/template.js?id=9805cd10b0f821298fd5" }

Dan Untuk Penggunaan laravel mix di laravel blade anda cukup simple dari yang kita cukup melakukan request ke file css hasil compile sebelumnya sbb :

Untuk FIle CSS Sbb :

Untuk File JS Sbb :

dan kita coba cek di browser hasilnya sbb :

Terlihat baik file css dan file js kita sudah menggunakan version id dengan begitu kita tidak perlu khawatir lagi setiap melakukan perubahan di file css / js karena setiap perubahan akan di sesuaikan dengan version id yang ada di server kita.

Kesimpulan

Laravel Mix merupakan solusi bagi kita dalam mengelola / manajemen file asset frontend di webapps kita bukan hanya mengelola namun juga meningkatkan performance dari web kita masih banyak hal lagi yang dapat anda explorer dari penggunaan laravel mix untuk mengetahui lebih lanjut mengenai laravel mix anda dapat klik disini.

Pertanyaan adalah apakah anda sudah menggunakan laravel Mix di web anda ? lalu apa yang anda rasakan setelah menerapkan laravel MIX ? jawab di kolom komentar ya..

Silahkan Mengunjungi blog pribadi saya di www.adinata.id dan dapatkan banyak tutorial dan trick web programming di blog saya www.adinata.id

Salam,
Adinata

Jangan Lupa klik tombol share dibawah agar lebih banyak yang mendapatkan manfaat dari penggunaan Laravel Mix

Originally published at https://adinata.id on February 22, 2020.