Vue Cli: Lazy Load Route Untuk Mempercepat Loading Halaman
lazy load route di vue cli3 - Perkembangan aplikasi berbasis web sudah mulai modern. Sekarang semua website serba cepat. Beberapa teknologi pengembangan web client-side modern lahir. Salah satunya dengan model SPA (single page application). Sistem ini bisa memanipulasi load hanya di penggalan elemen/div tertentu dalam satu file index.html.
Dalam menyebarkan aplikasi SPA atau single page application dengan framework vue tentunya memerlukan salah satu package yang berjulukan Vue Router. Package ini membantu melaksanakan proses render load di tiap file vue.
Disini aku akan memberi tahu teknik render component vue yang sewaktu-waktu niscaya akan mempunyai kegunaan untuk kalian para front-end developer.
Kita sudah mengenal cara routing di vue js menyerupai berikut ini
Ada cara lain dalam melaksanakan proses render yang bisa meringankan load halaman. ialah dengan cara menyerupai ini.
Bedanya apa?
Terkadang dalam proses render halaman dengan bundler, bundel javascript bisa berukuran sangat besar dan berat bila diload. Oleh sebab itu, kita bisa mengatasinya dengan memisah komponen tersebut. Dengan kata lain, halaman hanya diload dikala client masuk ke path /home atau /about. Hal ini dikenal dengan istilah lazy loaded. Sumber https://teziger.blogspot.com/
Dalam menyebarkan aplikasi SPA atau single page application dengan framework vue tentunya memerlukan salah satu package yang berjulukan Vue Router. Package ini membantu melaksanakan proses render load di tiap file vue.
Disini aku akan memberi tahu teknik render component vue yang sewaktu-waktu niscaya akan mempunyai kegunaan untuk kalian para front-end developer.
Kita sudah mengenal cara routing di vue js menyerupai berikut ini
routes: [ { path: '/', name: 'home', component: './views/Home.vue' }, { path: '/about', name: 'about', component: './views/About.vue' } ]Ada cara lain dalam melaksanakan proses render yang bisa meringankan load halaman. ialah dengan cara menyerupai ini.
routes: [ { path: '/', name: 'home', component: () => import('./views/Home.vue') }, { path: '/about', name: 'about', component:() => import( './views/About.vue') } ]Bedanya apa?
Terkadang dalam proses render halaman dengan bundler, bundel javascript bisa berukuran sangat besar dan berat bila diload. Oleh sebab itu, kita bisa mengatasinya dengan memisah komponen tersebut. Dengan kata lain, halaman hanya diload dikala client masuk ke path /home atau /about. Hal ini dikenal dengan istilah lazy loaded. Sumber https://teziger.blogspot.com/