Inertia on Laravel: Framework de php

Lazy Loading con Vue + Inertia

Thu, 08 Aug 2024 18:24:10 +0200

💤 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:

import { defineAsyncComponent } from 'vue'

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

Usado en el template:

tiempos de carga

Thu, 08 Aug 2024 18:24:10 +0200

🧰 3. Usar Laravel Debugbar

Para ver tiempos del backend: consultas, render Blade, controladores, etc.

Instalación (solo en local)

`1`	`composer require barryvdh/laravel-debugbar --dev`

Actívalo en .env:

APP_DEBUG=true
DEBUGBAR_ENABLED=true

Te muestra:

Tiempo total de ejecución
Consultas SQL lentas
Props de Inertia y su tamaño
Eventos del ciclo de vida

🌐 4. Herramientas externas

Lighthouse en Chrome

F12 → pestaña Lighthouse
Selecciona tipo de análisis (Mobile/Desktop)
Ejecuta
Revisa: First Contentful Paint, JS Execution Time, etc.

📌 Recomendaciones

Mide siempre en modo producción (APP_ENV=production)
Usa npm run build para tener JS optimizado
Usa php artisan optimize y config:cache
Usa lazy loading donde puedas
Reduce props innecesarias en Inertia::share()

¿Quieres que prepare también una guía para detectar props pesadas en Inertia y cómo optimizarlas?

Cómo detectar y optimizar props pesadas en Inertia.js

Thu, 08 Aug 2024 18:26:00 +0200

📦 Cómo detectar y optimizar props pesadas en Inertia.js

Inertia permite compartir datos desde Laravel al frontend, pero enviar demasiada información como props puede ralentizar tu aplicación.

❗ Problema común

En el middleware o en cada controlador puedes estar haciendo:

Inertia::share([
'auth' => [
'user' => Auth::user(),
'roles' => Auth::user()?->roles,
'permissions' => Auth::user()?->permissions,
],
'config' => Config::all(), // ❌ Cuidado con esto
'projects' => Project::all(), // ❌ Puede ser muy pesado
]);

Eso puede generar respuestas enormes que se envían en cada visita.

Cargar datos desde Vue con Fetch o Axios (Inertia)

Thu, 08 Aug 2024 18:27:00 +0200

🌐 Cargar datos desde Vue con Fetch o Axios (Inertia.js)

Cuando los datos son muy grandes o cambian frecuentemente, es mejor no enviarlos como props con Inertia y en su lugar, consultarlos desde el frontend usando fetch o axios.

❓ ¿Por qué hacerlo así?

Enviar grandes cantidades de datos como props (por ejemplo, Project::all()) hace que:

El tiempo de carga aumente
La respuesta JSON de Inertia sea pesada
Sea difícil hacer filtros/paginación en frontend

✅ Solución: usar `fetch()` o `axios` desde Vue

En lugar de pasar los datos con Inertia: