Vue — Performance

Lazy loading routes

const routes = [
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue')
  }
]

Async components

const AsyncComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)

v-once

<div v-once>Expensive content that never changes</div>

v-memo

<div v-memo="[item.id, item.selected]">
  {{ item.name }}
</div>

Computed caching

<script>
export default {
  computed: {
    // Cached - only recalculates when deps change
    expensive() {
      return this.items.reduce((sum, item) => sum + item.price, 0)
    }
  }
}
</script>

Avoid deep nesting

// Bad - generates long selectors
.page .section .card .title { ... }

// Good - flat selectors
.card-title { ... }

Virtual scrolling

npm install vue-virtual-scroller

<template>
  <RecycleScroller :items="items" :item-size="50">
    <template #default="{ item }">
      <div>{{ item.name }}</div>
    </template>
  </RecycleScroller>
</template>

Tree shaking

// Import only what you need
import { ref, computed } from 'vue'
import { debounce } from 'lodash-es'

Bundle analysis

npm run build -- --report

Mini Practice

1. Lazy load a route
2. Use v-once for static content
3. Optimize with computed
4. Analyze bundle size

Up Next

Continue with Security - Security best practices.