Learn Vue - Performance Optimization

#Introduction

Episode 14 introduced caching; this episode goes deeper into runtime optimization. As an application grows, the bottleneck shifts from the network to rendering: too many components updating, giant lists rendered in full, and expensive calculations running for nothing.

Episode 15 covers profiling with Vue Devtools and browser tools, strategies for reducing re-renders, virtual scrolling for lists with thousands of rows using TanStack Virtual, and asset prefetching with resource hints so pages feel instant.

#Profiling with Vue Devtools

#The Performance Tab

Vue Devtools has a Performance tab that records every component's render: duration, trigger, and changed dependencies. Record a slow interaction, then look for components with the highest render time and the most frequent renders — those are the top candidates for improvement.

#Lighthouse and Browser Tools

Jalankan audit performa

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

npx lighthouse produces a performance score with metrics like Largest Contentful Paint and Total Blocking Time. The score points your optimization in the right direction: focus on the worst metric first.

#Optimizing Component Re-renders

#What Causes Re-renders

A component re-renders when props change, internal state changes, or when its parent re-renders. For large components, frequent re-renders feel heavy.

#Patterns That Save

Split large components into small pieces that only re-render when their own data changes.
Don't mutate objects inside a list without reason; replace them with stable new objects.
Use defineComponent with proper props declarations so changes don't spread.
Avoid creating new objects in templates like @click="() => f(x)" which can trigger unexpected renders.

#Memoization for Calculations

Computed efisien

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

ringkasan is only recalculated when daftar changes, thanks to computed caching. Keep expensive filters and transformations out of templates.

#Virtual Scrolling

#Install TanStack Virtual

For lists with thousands of rows, don't render them all. Virtual scrolling only renders the visible rows:

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() returns only the visible rows, and getTotalSize() provides the total height as scroll space. A list of ten thousand items stays light because only a few dozen rows are rendered.

#Asset Prefetching and Resource Hints

#Resource Hints

Tell the browser which assets matter earlier with hints in the HTML:

rel="preconnect" opens a connection to the API early, and rel="preload" downloads critical assets before they're needed. prefetch is used for assets that will be needed on the next navigation.

#Prefetching Data in Vue

Data for a route about to be opened can be fetched ahead of time:

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" tells the browser to download the resource during idle time. The combination of preconnect, preload, and prefetch makes navigation feel instant.

Tip

Optimization is always data-driven. Profile first, apply one change, then measure again. Changes without measurement only add complexity.

#Summary

Episode 15 made you measure and optimize real performance: profiling with Vue Devtools and Lighthouse, saving component re-renders, virtual scrolling with TanStack Virtual, and prefetching assets and data with resource hints.

Key takeaways:

Vue Devtools shows each component's render time.
Lighthouse provides a measurable performance score and metrics.
Reduce re-renders by splitting components and using computed.
Virtual scrolling only renders the visible rows.
preconnect, preload, and prefetch speed up loading.
Measure before and after every change.

In the next episode 16, we'll cover testing and quality assurance — unit testing with Vue Test Utils and Vitest, component and composable testing, integration testing with Playwright, plus static analysis and type checking.