Belajar Vue - Performance Optimization

#Pendahuluan

Episode 14 mengenalkan caching; episode ini masuk lebih dalam ke optimasi runtime. Saat aplikasi tumbuh, bottleneck pindah dari jaringan ke render: terlalu banyak komponen yang di-update, daftar raksasa yang dirender penuh, dan perhitungan mahal yang dijalankan sia-sia.

Episode 15 membahas profiling dengan Vue Devtools dan tools browser, strategi mengurangi re-render, virtual scrolling untuk daftar ribuan baris dengan TanStack Virtual, serta prefetching aset dan resource hints agar halaman terasa instan.

#Profiling dengan Vue Devtools

#Tab Performance

Vue Devtools punya tab Performance yang merekam render setiap komponen: durasi, trigger, dan dependency yang berubah. Rekam interaksi yang lambat, lalu cari komponen dengan render time tertinggi dan frekuensi render terbanyak — itu calon utama perbaikan.

#Lighthouse dan Browser Tools

Jalankan audit performa

npx lighthouse https://staging.example.com --output=json --output-path=report.json

npx lighthouse menghasilkan skor performa dengan metrik seperti Largest Contentful Paint dan Total Blocking Time. Skor tersebut memberi arah optimasi: fokus ke metrik yang paling buruk dulu.

#Mengoptimalkan Re-render Komponen

#Penyebab Render Ulang

Komponen render ulang saat props berubah, state internal berubah, atau ketika parent render ulang. Untuk komponen besar, render ulang yang sering terasa berat.

#Pattern yang Menghemat

Pisahkan komponen besar menjadi bagian kecil yang hanya re-render saat data-nya berubah.
Jangan mutasi object di dalam daftar tanpa alasan; ganti dengan objek baru yang stabil.
Gunakan defineComponent dengan deklarasi props yang tepat agar perubahan tidak tersebar.
Hindari membuat object baru di template seperti @click="() => f(x)" yang bisa memicu render tak terduga.

#Memoization untuk Perhitungan

Computed efisien

import { computed } from "vue";
 
const ringkasan = computed(() => {
  return daftar.value
    .filter((item) => item.stok > 0)
    .map((item) => item.nama)
    .join(", ");
});

ringkasan hanya dihitung ulang saat daftar berubah berkat caching computed. Jauhkan filter dan transformasi mahal dari template.

#Virtual Scrolling

#Install TanStack Virtual

Untuk daftar ribuan baris, jangan render semuanya. Virtual scrolling hanya merender baris yang terlihat:

Install Vue Virtual

npm install @tanstack/vue-virtual

Virtual list

<script setup>
import { useVirtualizer } from "@tanstack/vue-virtual";
import { ref } from "vue";
 
const parentRef = ref(null);
const data = Array.from({ length: 10000 }, (_, i) => `Baris ${i}`);
 
const virtualizer = useVirtualizer({
  count: data.length,
  getScrollElement: () => parentRef.value,
  estimateSize: () => 35,
});
</script>
 
<template>
  <div ref="parentRef" class="list">
    <div :style="{ height: `${virtualizer.getTotalSize()}px` }">
      <div
        v-for="baris in virtualizer.getVirtualItems()"
        :key="baris.key"
        :style="{ transform: `translateY(${baris.start}px)` }"
      >
        {{ data[baris.index] }}
      </div>
    </div>
  </div>
</template>

virtualizer.getVirtualItems() mengembalikan hanya baris yang terlihat, dan getTotalSize() memberi tinggi total sebagai ruang scroll. Daftar sepuluh ribu item tetap ringan karena hanya puluhan baris yang dirender.

#Prefetching Aset dan Resource Hints

#Resource Hints

Beritahu browser aset apa yang penting lebih awal lewat hint di HTML:

rel="preconnect" membuka koneksi ke API lebih awal, dan rel="preload" mengunduh aset penting sebelum dibutuhkan. prefetch dipakai untuk aset yang akan digunakan di navigasi berikutnya.

#Prefetch Data di Vue

Data rute yang akan dibuka bisa di-fetch lebih dulu:

Prefetch data

import { onMounted } from "vue";
 
onMounted(() => {
  const link = document.createElement("link");
  link.rel = "prefetch";
  link.href = "/api/halaman-berikutnya";
  document.head.appendChild(link);
});

link.rel = "prefetch" memberi tahu browser untuk mengunduh sumber daya di waktu luang. Kombinasi preconnect, preload, dan prefetch membuat navigasi terasa instan.

Tip

Optimasi selalu berbasis data. Profil dulu, terapkan satu perubahan, lalu ukur lagi. Perubahan tanpa pengukuran hanya menambah kompleksitas.

#Penutup

Episode 15 membuat kalian mengukur dan mengoptimasi performa nyata: profiling dengan Vue Devtools dan Lighthouse, penghematan re-render komponen, virtual scrolling dengan TanStack Virtual, serta prefetching aset dan data dengan resource hints.

Inti yang harus dibawa pulang:

Vue Devtools menampilkan render time tiap komponen.
Lighthouse memberi skor dan metrik performa yang bisa diukur.
Kurangi re-render dengan memecah komponen dan computed.
Virtual scrolling hanya merender baris yang terlihat.
preconnect, preload, dan prefetch mempercepat loading.
Ukur sebelum dan sesudah setiap perubahan.

Di episode 16 selanjutnya kita membahas testing dan quality assurance — unit testing dengan Vue Test Utils dan Vitest, pengujian komponen dan composable, integration testing dengan Playwright, serta static analysis dan type checking.