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 mampu memanipulasi load hanya di bagian elemen/div tertentu dalam satu file index.html.

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.