Performance Optimization in Vue

// ❌ Eager — ALL components downloaded on initial load
import HomeView from '@/views/HomeView.vue'
import AdminView from '@/views/AdminView.vue'

// ✅ Lazy — each component only downloaded when route is visited
const routes = [
  { path: '/', component: () => import('@/views/HomeView.vue') },
  { path: '/admin', component: () => import('@/views/AdminView.vue') },
  // Group chunks — AdminView and AdminUsers in same chunk
  {
    path: '/admin/users',
    component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminUsers.vue')
  }
]

<script setup>
import { defineAsyncComponent } from &#039;vue'

// Lazy load heavy components
const HeavyChart = defineAsyncComponent(() =>
  import(&#039;@/components/HeavyChart.vue')
)

// With loading and error states
const HeavyTable = defineAsyncComponent({
  loader: () => import(&#039;@/components/HeavyTable.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorMessage,
  delay: 200,     // Show loading after 200ms
  timeout: 10000  // Show error after 10s
})
</script>

<template>
  <!-- Use Suspense for async component loading -->
  <Suspense>
    <template #default>
      <HeavyChart />
    </template>
    <template #fallback>
      <div>Loading chart...</div>
    </template>
  </Suspense>
</template>

<template>
  <!-- Without KeepAlive: component destroys/recreates on every tab switch -->
  <!-- With KeepAlive: component state preserved in memory -->
  <KeepAlive :include="[&#039;HomeView', 'ProductsView']" :max="5">
    <RouterView />
  </KeepAlive>

  <!-- Tab component that stays alive -->
  <KeepAlive>
    <component :is="currentTab === &#039;posts' ? PostsList : UsersList" />
  </KeepAlive>
</template>

<template>
  <!-- v-memo: skip re-render if listed deps haven&#039;t changed -->
  <!-- Perfect for large v-for lists with complex items -->
  <div
    v-for="item in largeList"
    :key="item.id"
    v-memo="[item.id, item.selected, item.status]"
  >
    <!-- This subtree only re-renders if id, selected, or status changes -->
    <ComplexItemCard :item="item" />
  </div>
</template>

<script setup>
import { ref, shallowRef, shallowReactive } from &#039;vue'

// ref: deep reactive — watches ALL nested properties
const deepData = ref({ user: { profile: { avatar: &#039;...' } } })

// shallowRef: only reactive at top level
// Changing deepData.value.user.name does NOT trigger update
// But replacing deepData.value = {} DOES trigger update
const shallowData = shallowRef({ user: { profile: { avatar: &#039;...' } } })

// Use shallowRef for large data sets where you only replace entire value
const bigList = shallowRef([/* 10,000 items */])

// Force update after mutation
function updateBigList() {
  bigList.value.push(newItem)
  triggerRef(bigList)  // Manually trigger since shallowRef won't auto-detect
}
</script>

npm install vue-virtual-scroller

<script setup>
import { ref } from &#039;vue'
import { RecycleScroller } from &#039;vue-virtual-scroller'
import &#039;vue-virtual-scroller/dist/vue-virtual-scroller.css'

// 100,000 items — normal v-for would freeze the browser
const items = ref(Array.from({ length: 100000 }, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`
})))
</script>

<template>
  <!-- Only renders visible items (typically ~20) regardless of list size -->
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="60"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="list-item">
      <strong>{{ item.name }}</strong>
      <span>{{ item.email }}</span>
    </div>
  </RecycleScroller>
</template>

<style>
.scroller { height: 600px; }
.list-item { height: 60px; display: flex; align-items: center; gap: 1rem; padding: 0 1rem; border-bottom: 1px solid #f1f5f9; }
</style>