Lazy Loading con Vue + Inertia

Categories:
Tags:

💤 Lazy Loading en Vue 3 + Inertia.js

Lazy loading (carga diferida) permite dividir tu frontend en partes pequeñas que se cargan sólo cuando se necesitan, mejorando mucho el rendimiento.

⚙️ Lazy loading de componentes Vue

Evita esto:

1
2

// ❌ Carga directa del componente
import Dashboard from '@/Pages/Dashboard.vue'

Haz esto:

1
2
3
4
5

import { defineAsyncComponent } from 'vue'

const Dashboard = defineAsyncComponent(() =>
import('@/Pages/Dashboard.vue')
)

Usado en el template:

1
2
3

<template>
<Dashboard />
</template>

📁 Lazy loading de vistas Inertia

app.js (carga dinámica por nombre)

Esta configuración es estándar y muy eficiente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// resources/js/app.js

createInertiaApp({
resolve: name =>
import(`./Pages/${name}.vue`).then(module => module.default),
setup({ el, App, props, plugin }) {
const app = createApp({ render: () => h(App, props) })
app.use(plugin).mount(el)
}
})

Inertia cargará automáticamente solo el componente Vue que corresponda a la ruta Laravel.

🧩 Lazy loading con layouts

Puedes hacer que cada layout se cargue de forma diferida. Ejemplo:

LayoutGuest.vue

1
2
3
4
5
6

export default {
name: 'LayoutGuest',
setup(_, { slots }) {
return () => h('div', { class: 'guest-layout' }, slots.default?.())
}
}

Página con layout asíncrono

1
2
3
4
5
6
7
8
9

<script setup>
import { defineAsyncComponent } from 'vue'

const Layout = defineAsyncComponent(() =>
  import('@/Layouts/LayoutGuest.vue')
)

defineOptions({ layout: Layout })
</script>

Esto divide tu layout y evita que se cargue en páginas donde no es necesario (ej. admin).

📂 Lazy loading por secciones

Supón esta estructura de carpetas:

Pages/ ├── Auth/ │ └── Login.vue ├── Admin/ │ └── Dashboard.vue

yaml Copiar Editar

Puedes modificar resolve: para detectar carpetas distintas:

1
2
3
4
5
6

resolve: name => {
if (name.startsWith('Admin/')) {
return import(`./Pages/Admin/${name.replace('Admin/', '')}.vue`).then(m => m.default)
}
return import(`./Pages/${name}.vue`).then(m => m.default)
}

Esto te permite organizar mejor grandes áreas (como admin).

🧪 Medir rendimiento en DevTools

  1. Abre Chrome DevTools → Network
  2. Activa Disable cache
  3. Navega entre páginas
  4. Verás cómo los archivos .js sólo se descargan cuando hacen falta

✅ Ventajas del Lazy Loading

  • ⚡ Reduce el bundle inicial
  • 🧠 Mejora el First Load para usuarios
  • 🔁 Compatible con layouts, rutas y secciones enteras
  • 🔧 Sin configuración extra (funciona con Vite por defecto)

📌 Recomendaciones finales

  • Usa lazy loading para vistas no críticas (admin, ajustes, estadísticas…)
  • Siempre combina con npm run build en producción
  • Agrupa layouts por sección si tu app tiene frontend + backend