Belajar Nuxt - Performance Optimization

#Pendahuluan

Episode 14 memberi strategi cache; episode 15 masuk lebih dalam ke optimasi performa teknis. Kalian tidak bisa memperbaiki apa yang tidak diukur, jadi episode ini dimulai dari profiling, lalu bergerak ke perbaikan yang spesifik: rendering, bundle, payload, dan prefetching.

Tujuannya bukan sekadar skor Lighthouse yang bagus, tapi pengalaman nyata: halaman yang langsung bisa diinteraksikan, navigasi yang terasa instan, dan bundle yang tidak membebani perangkat pengguna dengan internet lambat.

#Profiling dengan Vue DevTools dan Browser Tools

#Memakai Nuxt DevTools

Nuxt DevTools — yang kita aktifkan di episode 3 — menyediakan tab performa untuk melihat waktu render setiap komponen:

npm run dev

Buka http://localhost:3000/_nuxt/ lalu pilih tab Performa. Dari sini kalian bisa melihat komponen mana yang paling lama dirender dan berapa kali dirender ulang.

#Browser DevTools dan Lighthouse

Chrome DevTools memberikan dua alat kunci: tab Network untuk melihat ukuran dan urutan request, serta tab Performance untuk merekam profil runtime. Untuk skor kualitas, gunakan Lighthouse:

npx lighthouse http://localhost:3000 --view

Perintah npx lighthouse http://localhost:3000 --view menjalankan audit lengkap dan membuka hasilnya. Perhatikan metrik seperti Largest Contentful Paint dan Total Blocking Time.

#Optimizing Component Rendering dan Bundle Size

#Komponen yang Terlalu Sering Render

Jika sebuah komponen mahal dirender ulang setiap kali state berubah, batasi responsivitasnya. computed yang tepat bisa memangkas render berulang:

Memoisasi daftar

const daftarBayar = computed(() =>
  items.value.filter((item) => item.harga > 100000)
)

computed(() => items.value.filter(...)) hanya menghitung ulang saat items berubah, bukan saat komponen re-render. Hindari melakukan kalkulasi berat langsung di template.

#Analisis Bundle dengan nuxi analyze

Ukuran bundle sering menjadi sumber utama lambatnya halaman. Analisis visual:

npx nuxi analyze

npx nuxi analyze membangkitkan laporan interaktif tentang isi bundle: library mana yang paling besar dan di mana bisa di-split. Dua target utama: library besar yang bisa di-lazy load, dan kode yang sebenarnya tidak dipakai.

#Prefetching Links dan Resource Hints

#NuxtLink Prefetch Otomatis

<NuxtLink> sudah melakukan prefetching secara cerdas — saat link terlihat di viewport, Nuxt mengunduh payload halaman tujuannya di latar belakang. Ini membuat navigasi terasa instan:

Link dengan prefetch

<NuxtLink to="/produk" prefetch>Katalog</NuxtLink>

NuxtLink to="/produk" prefetch memaksa prefetch bahkan sebelum link terlihat. Untuk halaman yang sangat penting, tambahkan prefetch; untuk area yang jarang dikunjungi, biarkan default.

#Resource Hints Manual

Untuk sumber daya yang bukan link, gunakan resource hints:

Preload font di head

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: "preload", href: "/font/utama.woff2", as: "font", type: "font/woff2", crossorigin: "" },
      ],
    },
  },
})

rel: "preload" memberitahu browser bahwa font ini dibutuhkan segera. Pakai hemat — preload terlalu banyak justru mencuri bandwidth dari sumber daya lain.

#Reducing JavaScript Payload dan Server Payload

#Komponen Lazy Load

Komponen besar seperti editor teks atau chart sebaiknya dimuat hanya saat dibutuhkan. Gunakan lazy component:

Lazy load komponen

<script setup lang="ts">
const { ChartHarga } = defineAsyncComponent({
  loader: () => import("~/components/ChartHarga.vue"),
})
</script>

defineAsyncComponent(() => import(...)) membuat komponen dimuat terpisah dari bundle utama. Kode ini tidak membebani halaman awal — hanya diunduh saat komponen pertama kali dirender.

#Server Payload yang Efisien

Nuxt mengirim payload data ke client agar hydration konsisten. Payload yang membengkak memperlambat halaman. Minta hanya field yang dibutuhkan:

Kurangi payload

const { data } = await useFetch("/api/produk", {
  query: { fields: "id,nama,harga" },
})

Minta hanya field yang dibutuhkan dari API. Payload sekecil mungkin berarti waktu parse dan network yang lebih singkat.

#Penutup

Episode 15 melatih insting performa kalian: mengukur dengan Nuxt DevTools, Lighthouse, dan nuxi analyze sebelum mengoptimasi; memperbaiki rendering dengan computed dan lazy component; memanfaatkan prefetching NuxtLink dan resource hints; serta mengecilkan payload JavaScript dan server payload.

Inti yang harus dibawa pulang:

• Ukur dulu dengan Nuxt DevTools dan Lighthouse sebelum mengoptimasi.
• computed dan memoization mencegah render ulang yang tidak perlu.
• nuxi analyze menampilkan komposisi bundle secara visual.
• NuxtLink melakukan prefetch otomatis saat link mendekati viewport.
• Lazy component dengan defineAsyncComponent mengecilkan bundle awal.
• Kurangi server payload dengan hanya mengambil field yang dibutuhkan.

Di episode 16 selanjutnya kita akan membahas testing dan quality — unit testing dengan Vitest, component testing dengan Vue Test Utils, integration dan end-to-end testing dengan Playwright, serta static analysis dan type checking untuk menjaga kualitas. Kode toko kalian akan diuji secara otomatis.