Performance optimization improvements

Performance optimization is a crucial aspect of Vue.js development that cannot be overlooked, as it directly impacts user experience and application efficiency. From component rendering to state management, every detail can become a performance bottleneck. Proper optimization strategies can significantly improve application responsiveness.

Component Lazy Loading and Async Loading

Dynamic component imports are an effective way to reduce initial load times. Vue's defineAsyncComponent method enables on-demand loading:

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

Lazy loading is equally applicable at the routing level:

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

This pattern is particularly suitable for analysis pages with numerous charts, where only the resources needed for the current view are requested during initial loading.

Computed Property Cache Optimization

The caching mechanism of computed properties can be inadvertently disrupted. Avoid creating new objects inside computed properties:

// Bad practice - generates a new array on every access
computed: {
  filteredItems() {
    return this.items.filter(item => item.active).map(item => ({ ...item }))
  }
}

// Good practice - maintain stable references
computed: {
  activeItems() {
    return this.items.filter(item => item.active)
  },
  processedItems() {
    return this.activeItems.map(item => ({ ...item }))
  }
}

When dependencies remain unchanged, adding cache control can further enhance performance:

import { computed } from 'vue'

const expensiveCalculation = computed(() => {
  // Complex computation
}, { cache: true })

Virtual Scrolling for Long Lists

For rendering extremely long lists, virtual scrolling technology can dramatically reduce the number of DOM nodes:

<template>
  <RecycleScroller
    class="scroller"
    :items="largeList"
    :item-size="54"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">{{ item.content }}</div>
  </RecycleScroller>
</template>

<script setup>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
</script>

Actual test data shows that rendering time for lists with tens of thousands of items can drop from 12 seconds to 200 milliseconds.

Fine-Grained Control of Reactive Data

Excessive use of ref and reactive can lead to unnecessary dependency tracking:

// Before optimization
const state = reactive({
  config: { /* numerous configuration items */ },
  status: { /* frequently changing states */ }
})

// After optimization
const staticConfig = markRaw(/* configuration data */)
const dynamicStatus = reactive({ /* state data */ })

For form handling, using shallow reactivity can improve performance:

const formData = shallowReactive({
  fields: Object.fromEntries(
    Array(50).fill().map((_, i) => [`field${i}`, ''])
  )
})

Debouncing and Throttling Event Handlers

High-frequency events require frequency control:

import { throttle } from 'lodash-es'

export default {
  methods: {
    handleScroll: throttle(function(position) {
      // Scroll handling logic
    }, 100)
  }
}

An elegant implementation in the Composition API:

import { useDebounceFn } from '@vueuse/core'

const searchInput = ref('')
const debouncedSearch = useDebounceFn(() => {
  fetchResults(searchInput.value)
}, 300)

Component Update Strategy Optimization

Use v-once judiciously for static content:

<template>
  <header v-once>
    <h1>{{ title }}</h1>
    <nav><!-- Navigation menu --></nav>
  </header>
</template>

For frequently updated components, manually control update detection:

defineComponent({
  props: ['data'],
  shouldComponentUpdate(nextProps) {
    return nextProps.data.id !== this.props.data.id
  }
})

Performance Considerations for Dependency Injection

Reactive data in provide/inject affects all injected components:

// Use reactivity cautiously
const theme = reactive({ color: 'blue' })
provide('theme', readonly(theme))

// Non-reactive data is more efficient
const staticConfig = { version: '1.0' }
provide('config', staticConfig)

Compile-Time Optimization Configuration

Build configurations in vue.config.js affect output:

module.exports = {
  chainWebpack: config => {
    config.optimization
      .minimize(true)
      .splitChunks({
        chunks: 'all',
        maxSize: 244 * 1024 // Split bundles larger than 244KB
      })
  },
  productionSourceMap: false // Disable sourcemaps
}

Enable modern mode builds:

module.exports = {
  modern: 'client' // Generate dual modern/legacy versions
}

Memory Leak Prevention

Clean up third-party library instances:

onBeforeUnmount(() => {
  if (this.chartInstance) {
    this.chartInstance.dispose()
    this.chartInstance = null
  }
})

Automatic cleanup of event listeners:

import { useEventListener } from '@vueuse/core'

useEventListener(window, 'resize', () => {
  // No manual removal needed
})

Server-Side Rendering Optimization

Payload extraction strategy in Nuxt.js:

// nuxt.config.js
export default {
  render: {
    resourceHints: false,
    http2: {
      push: true,
      pushAssets: (req, res, publicPath, preloadFiles) => {
        return preloadFiles
          .filter(f => f.asType === 'script')
          .map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`)
      }
    }
  }
}

Performance Monitoring and Analysis

Integrate performance tracking tools:

import { getPerformance } from 'firebase/performance'

const perf = getPerformance()
const trace = perf.trace('custom_trace')
trace.start()

// Critical operations
await performCriticalTask()

trace.stop()

Chrome DevTools auditing method:

// Trigger performance snapshots at appropriate times
window.__PERFORMANCE_PROFILE__ = true
setTimeout(() => {
  console.profile('ComponentRender')
  forceRerender()
  console.profileEnd()
}, 1000)