Dalam mengembangkan aplikasi SPA atau single page application dengan framework vue tentunya memerlukan salah satu package yang bernama Vue Router. Package ini membantu melakukan proses render load di tiap file vue.
Disini saya akan memberi tahu teknik render component vue yang sewaktu-waktu pasti akan berguna untuk kalian para front-end developer.
Kita sudah mengenal cara routing di vue js seperti berikut ini
routes: [
{
path: '/',
name: 'home',
component: './views/Home.vue'
},
{
path: '/about',
name: 'about',
component: './views/About.vue'
}
]
Ada cara lain dalam melakukan proses render yang mampu meringankan load halaman. yaitu dengan cara seperti 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 jika diload. Oleh karena itu, kita bisa mengatasinya dengan memisah komponen tersebut. Dengan kata lain, halaman hanya diload ketika client masuk ke path /home atau /about. Hal ini dikenal dengan istilah lazy loaded.
Terima kasih telah membaca artikel tentang VUE CLI: Lazy Load Route Untuk Mempercepat Loading Halaman di blog successful blogger jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.