How do you optimize performance in a Vue app?

Question

IT Interview Practice · Accepted Answer

Vue performance optimization spans bundle size, rendering efficiency, and reactivity cost. Here are the highest-impact techniques. ## 1. Code splitting / lazy loading ```js // lazy-load routes and heavy components → smaller initial bundle const routes = [{ path: "/admin", component: () => import("./Admin.vue") }]; const Chart = defineAsyncComponent(() => import("./Chart.vue")); ``` The biggest initial-load win: don't ship code the user doesn't need yet. ## 2. Use v-show vs v-if appropriately ```vue

``` ## 3. Always use stable :key in v-for ```vue

``` ## 4. Avoid unnecessary reactivity ```js import { shallowRef, shallowReactive } from "vue"; // for large objects you replace wholesale (or 3rd-party instances), skip deep tracking const bigData = shallowRef(hugeObject); // only .value reassignment is reactive Object.freeze(staticConfig); // never-changing data → no reactivity overhead ``` Deep reactivity on huge objects is costly; `shallowRef`/`shallowReactive`/`Object.freeze` avoid tracking data that doesn't need it. ## 5. Computed (cached) over methods for derived values ```vue

``` ## 6. v-once / v-memo for static or rarely-changing content ```vue

...

``` ## 7. Virtualize long lists ```text Rendering 10,000 rows kills performance → use vue-virtual-scroller / TanStack Virtual to render only the visible rows. ``` ## 8. Optimize images, and consider SSR/SSG (Nuxt) for first paint ## Measuring ```text Vue DevTools (component render timings, why a component re-rendered) build output / rollup-plugin-visualizer → bundle composition Lighthouse → Core Web Vitals ``` ## Why it matters Vue is fast by default, but large apps need deliberate optimization: **lazy-load** to shrink bundles, choose `v-if`/`v-show` correctly, use stable keys, avoid over-reactivity on big data (`shallowRef`/`freeze`), cache with `computed`/`v-memo`, and virtualize long lists. Knowing which technique addresses which bottleneck — and measuring with DevTools/Lighthouse rather than guessing — is what keeps a growing Vue app responsive.

1. Code splitting / lazy loading

2. Use v-show vs v-if appropriately

3. Always use stable :key in v-for

4. Avoid unnecessary reactivity

5. Computed (cached) over methods for derived values

6. v-once / v-memo for static or rarely-changing content

7. Virtualize long lists

8. Optimize images, and consider SSR/SSG (Nuxt) for first paint

Measuring

Why it matters

Related questions