Skip to content
← Todas las preguntas
Avanzado

¿Cómo implementarías lazy loading y code splitting?

RendimientoVue Router
ts
// Rutas con carga diferida
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]

// Componente asíncrono con estados de carga y error
import { defineAsyncComponent } from 'vue'

const HeavyChart = defineAsyncComponent({
  loader: () => import('./components/HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,    // ms before showing loading
  timeout: 10000 // ms before showing error
})

Vite automáticamente hace code splitting en los imports dinámicos. Cada () => import(...) se convierte en un chunk separado.

Publicado bajo la licencia MIT.