---
globs: *.vue,*.js
---

# Performance Optimization

## Lazy Loading
```javascript
// Lazy load components
const UserList = defineAsyncComponent(() => import('@/views/UserList.vue'))

// Lazy load routes
const routes = [
  {
    path: '/users',
    component: () => import('@/views/UserList.vue')
  }
]
```

## Computed Properties
```vue
<script setup>
// Good - computed for expensive operations
const expensiveValue = computed(() => {
  return heavyCalculation(props.data)
})

// Good - computed for derived state
const filteredUsers = computed(() => {
  return users.value.filter(user => user.active)
})
</script>
```

## Virtual Scrolling
```vue
<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">{{ item.name }}</div>
  </RecycleScroller>
</template>
```

## Image Optimization
```vue
<template>
  <img 
    :src="imageSrc" 
    :alt="alt"
    loading="lazy"
    @error="handleImageError"
  />
</template>

<script setup>
const handleImageError = (event) => {
  event.target.src = '/images/placeholder.png'
}
</script>
```