Lazy Loading Vue Router: Cara Meningkatkan Performa Aplikasi

Dalam pengembangan aplikasi berbasis Vue.js, performa menjadi aspek penting, terutama untuk aplikasi skala besar. Lazy loading adalah teknik yang memungkinkan kita memuat bagian tertentu dari aplikasi hanya saat dibutuhkan, sehingga mengurangi waktu loading awal. Dalam artikel ini, kita akan membahas cara menerapkan lazy loading pada Vue Router untuk meningkatkan performa aplikasi.

📌 Baca juga: Cara Membuat Komponen Reusable di Vue.js: Desain UI yang Fleksibel

---

1. Apa Itu Lazy Loading?

Lazy loading adalah teknik pemuatan dinamis, di mana modul atau halaman hanya diambil dari server ketika benar-benar dibutuhkan. Ini mengurangi ukuran bundle awal yang dikirim ke browser, mempercepat waktu muat aplikasi.

Tanpa lazy loading, semua halaman dimuat saat aplikasi pertama kali dijalankan, yang dapat memperlambat waktu muat awal. Dengan lazy loading, hanya halaman yang diperlukan yang akan dimuat, sementara halaman lainnya ditunda hingga diperlukan.

2. Mengaktifkan Lazy Loading di Vue Router

Vue Router memungkinkan kita menggunakan lazy loading dengan dynamic imports dari ES6 menggunakan import(). Berikut adalah cara mengonfigurasi Vue Router agar menggunakan lazy loading.

a. Konfigurasi Vue Router dengan Lazy Loading

Buka file router/index.js atau router.js dan ubah konfigurasi seperti berikut:

import { createRouter, createWebHistory } from 'vue-router'

// Lazy load menggunakan import()
const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')
const Contact = () => import('@/views/Contact.vue')

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/contact', name: 'Contact', component: Contact }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

b. Mengapa Menggunakan Lazy Loading?

✅ Mengurangi ukuran bundle awal → Aplikasi lebih ringan saat pertama kali diakses.
✅ Mempercepat waktu loading awal → Halaman hanya dimuat saat diperlukan.
✅ Optimasi kinerja untuk aplikasi besar → Ideal untuk aplikasi dengan banyak halaman.

3. Menerapkan Lazy Loading dengan Grouping (Chunking)

Jika kita ingin mengelompokkan beberapa halaman dalam satu bundle, kita bisa menggunakan webpack chunk name seperti berikut:

const Dashboard = () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue')
const Settings = () => import(/* webpackChunkName: "dashboard" */ '@/views/Settings.vue')

const routes = [
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  { path: '/settings', name: 'Settings', component: Settings }
]

Dengan teknik ini, Dashboard dan Settings akan dimuat dalam satu file JavaScript yang sama, sehingga mengurangi jumlah permintaan HTTP.

4. Menggunakan Suspense untuk Lazy Components

Jika menggunakan Vue 3, kita juga bisa menggunakan <Suspense> untuk menangani komponen yang dimuat secara lazy.

<template>
  <Suspense>
    <template #default>
      <LazyComponent />
    </template>
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

// Lazy load komponen
const LazyComponent = defineAsyncComponent(() => import('@/components/LazyComponent.vue'))
</script>

Kesimpulan

Menggunakan lazy loading di Vue Router adalah salah satu cara terbaik untuk meningkatkan performa aplikasi. Dengan hanya memuat halaman saat dibutuhkan, kita dapat mengurangi waktu loading awal, mempercepat akses, dan mengoptimalkan pengalaman pengguna.

📌 Baca juga: Cara Membuat Komponen Reusable di Vue.js: Desain UI yang Fleksibel