Measuring First

Optimising without measuring is guessing. Before changing anything, get a number you can compare: the same interaction, timed the same way, before and after.

Vue's own markers

Set app.config.performance = true on the application instance in main.ts. Vue then emits performance.mark entries for component init, compile, render and patch, and they appear in the browser's performance panel next to everything else. It works in development builds only, and only in browsers that support the performance.mark API.

Recording a profile

Open the browser's Performance panel, press record, do one thing — type one character, open one panel — then stop. The flame chart shows which function ran and for how long. Vue DevTools, installed as a browser extension or added to the project with the vite-plugin-vue-devtools plugin, shows the component tree, so you can tell which component a frame belongs to.

Getting a number

Flame charts are hard to compare between runs. Your own marks are not. Mark before a state change, await nextTick() so Vue has patched the DOM, then call performance.measure and read its duration. Run it five times and keep the median.

What trips people up

Development numbers are not production numbers. The dev build does extra work — warnings, prop checks, devtools hooks — so a dev profile tells you where the time goes, not how long a user waits. Confirm the win with vite build followed by vite preview.

<script setup lang="ts">
import { nextTick, ref } from 'vue'

const rows = ref<string[]>([])

async function load(count: number): Promise<void> {
  performance.mark('rows-start')
  rows.value = Array.from({ length: count }, (_, index) => `Row ${index + 1}`)
  await nextTick()
  const measure = performance.measure('rows-render', 'rows-start')
  console.log(`${count} rows patched in ${measure.duration.toFixed(1)}ms`)
}
</script>

<template>
  <section>
    <button type="button" @click="load(2000)">Load 2000 rows</button>
    <p>{{ rows.length }} rows</p>
    <ul>
      <li v-for="row in rows" :key="row">{{ row }}</li>
    </ul>
  </section>
</template>

<style scoped>
ul {
  max-height: 16rem;
  overflow-y: auto;
}
</style>

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

if (import.meta.env.DEV) {
  app.config.performance = true
}

app.mount('#app')

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [vue(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

// src/perf/longTasks.ts
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`long task: ${entry.duration.toFixed(0)}ms`)
  }
})

observer.observe({ type: 'longtask', buffered: true })
// Output: long task: 180ms