Menghapus VueJS dan Dependensinya dari Laravel
Di Laracast.com, ada seorang pengguna yang “protes” karena disematkannya VueJS dalam instalasi Laravel (dia juga tidak suka dengan adanya Laravel Mix). Tak hanya di forum tersebut, di beberapa grup Facebook juga beberapa kali penggunanya mempertanyakan hal serupa, kenapa harus ada VueJS di Laravel?
Pertama, dengan adanya VueJS dalam paket instalasi Laravel, bukan berarti kita harus mempelajari dan menggunakannya dalam aplikasi. Perannya hanya sekadar rekomendasi, tak lebih dari itu. Lagian, jika kita cermati, tak hanya VueJS yang disertakan di didalamanya, ada jQuery juga. termasuk beberapa librari lainnya seperti Lodash, Axios, dan Bootstrap-SASS.
Kedua, Laravel — setidaknya sampai saat ini — masih berada di tangan Taylor Otwell. Jadi keputusan penggunaan add-ons mutlak di bawah komando Taylor. Suka-sukanya dia saja mau pakai dan nyaman dengan yang mana. Maka, jangan kaget kalau rilis berikutnya menyertakan librari yang tak sesuai dengan selera kita.
“Cukup ceramahnya! Pokoknya saya tidak mau menggunakan VueJS dalam aplikasi saya! Saya mau menghilangkannya dari kehidupan saya!”
Okay, kalau memang maunya begitu.
Sebagai informasi, saya menggunakan Laravel versi 5.4 dalam contoh kasus tulisan ini.
Hapus Vue Instance dan Komponennya
Hal pertama yang dilakukan untuk menghilangkan VueJS adalah membuka berkas resources/assets/js/app.js kemudian menghapus instance Vue di dalamnya. Isinya kurang lebih seperti ini.
Vue.component('example', require('./components/Example.vue'));const app = new Vue({
el: '#app'
});
Untuk Laravel versi 5.3, isi skripnya tidak jauh berbeda dengan yang di atas.
Hapus Impor VueJS
Jika kita lihat sepenuhnya pada berkas resources/assets/js/app.js, akan kita dapati berkas tersebut memuat berkas lainnya dengan nama bootstrap. Lengkapnya ada di resources/assets/js/bootstrap.js.
Dalam berkas tersebut, didefinisikan beberapa variabel berdasarkan JavaScript yang terinstal dalam direktori node_modules. Untuk mengilangkan VueJs, hapus baris skrip seperti di bawah.
/**
* Vue is a modern JavaScript library for
* building interactive web interfaces
* using reactive data binding and reusable components.
* Vue's API is clean and simple, leaving you to focus on
* building your next great project.
*/window.Vue = require('vue');
Hilangkan VueJS dari NPM
Langkah selanjutnya, menghapus selamanya instalasi VueJS (lokal) menggunakan NPM. Daftar modul yang akan diinstal dapat dilihat pada berkas package.json.
{
"devDependencies": {
"axios": "^0.15.2",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"laravel-mix": "^0.5.0",
"lodash": "^4.16.2",
"vue": "^2.0.1" // hilangkan bagian ini
}
}Langkah terakhir, instal atau perbarui modul NodeJS menggunakan NPM atau Yarn.
npm install
npm update// atau menggunakan yarnyarn install
yarn upgrade
Kompilasi
Kompilasi ulang assets di Laravel menggunakan perintah di bawah:
npm run productionYah, dengan menghilangkan VueJS yang tidak digunakan, setidaknya kita bisa menghemat ruang beberapa ratus kilobytes. Lumayan loh buat performa web.
Lalu, selanjutnya apa?
Selanjutnya tinggal melanjutkan aktivitas coding. Buat aplikasi sesuai dengan kebutuhan kamu, atau instal JavaScript framework lainnya yang kamu sukai, ReactJS, AngularJS, atau Marko misalnya.
Eh, Bagaimana dengan Axios?
Bagi yang kental berurusan dengan VueJS, pasti merekomendasikan Axios sebagai HTTP client yang digunakan. Axios sendiri tidak terikat langsung dengan VueJS. Karena sifatnya yang agnostik, kita bisa menggunakaannya bersamaan dengan framework atau librari JavaScript lainnya. Kalaupun tidak terbiasa menggunakan Axios, kita bisa menghapusnya, dan menggunakan HTTP client bawaan jQuery saja.
Lain cerita di versi 5.3 ke bawah. Laravel menggunakan Vue Resource sebagai HTTP client-nya. Vue Resource merupakan plugin untuk VueJS, yang artinya, tidak dapat berjalan tanpa adanya VueJS itu sendiri. Daripada membuat masalah di kemudian hari, lebih baik menghapusnya sekalian bersamaan hilangnya VueJS dari aplikasi.
Selamat bereksperimen! 😉
