Aprender Vuejs Performance, deploy y buenas prácticas

Optimizar el rendimiento de una aplicación Vue y desplegarla correctamente son habilidades fundamentales para llevar un proyecto a producción. Este módulo cubre técnicas de optimización como defineAsyncComponent, v-memo y v-once, la creación de directivas y plugins personalizados, y las estrategias de build y despliegue con Vite.

Directivas personalizadas

Vue permite crear directivas personalizadas para acceder directamente al DOM cuando las abstracciones de templates no son suficientes. Una directiva se define con hooks que se ejecutan en distintas fases del ciclo de vida del elemento:

// directives/vFocus.ts
import type { Directive } from 'vue'

const vFocus: Directive = {
  mounted(el: HTMLElement) {
    el.focus()
  },
}

export default vFocus

Uso en un componente:

<script setup lang="ts">
import vFocus from '@/directives/vFocus'
</script>

<template>
  <input v-focus placeholder="Este input recibe el foco automáticamente" />
</template>

Optimización de rendimiento

Vue proporciona varias herramientas para optimizar el rendimiento en diferentes escenarios:

• defineAsyncComponent: carga componentes de forma lazy, reduciendo el bundle inicial
• v-memo: memoriza subárboles del template para evitar re-renderizados innecesarios en listas grandes
• v-once: renderiza contenido estático una sola vez, sin rastrear cambios reactivos
• shallowRef: crea referencias reactivas sin reactividad profunda, útil para objetos grandes que se reemplazan completos

Despliegue a producción

Vite genera un build optimizado para producción con tree-shaking, minificación y code splitting automático. La configuración de variables de entorno con el prefijo VITE_, las estrategias de división de chunks y el despliegue en plataformas como Netlify, Vercel o contenedores Docker permiten llevar la aplicación a producción de forma eficiente.

Este módulo cubre desde la creación de directivas y plugins personalizados hasta la configuración completa del build y las opciones de despliegue.