Optimización de Rendimiento
Mejoras para MPA
// 1. Cache de recursos estáticos
// archivo servidor.js - Configurar cabeceras
servidor.usar(express.estatico('recursos', {
maxEdad: '1d',
etiqueta: false
}));
// 2. Cache de plantillas
servidor.configurar('cache plantillas', true);
// 3. Aceleración con CDN
<script src="https://cdn.dominio.com/biblioteca.min.js"></script>
// 4. Carga selectiva de recursos
// Cada vista importa solo sus dependencias
Mejoras para SPA
// vite.config.js
exportar predeterminado definirConfig({
compilacion: {
opcionesRollup: {
salida: {
fragmentosManuales: {
librerias: ['react', 'react-router', 'zustand'],
herramientas: ['lodash-es', 'axios', 'date-fns']
}
}
},
minificar: 'terser',
opcionesTerser: {
comprimir: { eliminar_consola: true }
}
},
plugins: [react()]
});
// Carga diferida de rutas
const DetalleProducto = () => importar('./vistas/DetalleProducto.jsx');
// Componentes asíncronos
const ComponentePesado = definirComponenteAsincrono(() =>
importar('./componentes/ComponentePesado.jsx')
);
// Listas virtuales
<ListaVirtual elementos={datos} alturaElemento={45}>
{({ elemento }) => <TarjetaProducto producto={elemento} />}
</ListaVirtual>
Soluciones para SEO
SEO en MPA
<html lang="es">
<head>
<title>Catálogo - Tienda Online</title>
<meta name="description" content="Productos destacados...">
</head>
<body>
<h1>Nuestros productos</h1>
<div class="productos">
<!-- Contenido renderizado en servidor -->
</div>
</body>
</html>
SEO en SPA
// 1. Renderizado en servidor (SSR)
// Usar Next.js (React) o Nuxt.js (Vue)
// 2. Prerrenderizado
// vite.config.js
importar { definirConfig } from 'vite';
importar react from '@vitejs/plugin-react';
importar prerenderizar from 'vite-plugin-prerender';
exportar predeterminado definirConfig({
plugins: [
react(),
prerenderizar({
rutas: ['/', '/contacto', '/articulos']
})
]
});
// 3. Metadatos dinámicos
// hook useMetadata.js
exportar funcion usarMetadatos(metadatos) {
const { titulo, descripcion } = metadatos;
useEffect(() => {
if (titulo) document.titulo = titulo;
let etiquetaDesc = document.buscar('meta[name="description"]');
if (!etiquetaDesc) {
etiquetaDesc = document.crearElemento('meta');
etiquetaDesc.name = 'description';
document.cabecera.agregarHijo(etiquetaDesc);
}
etiquetaDesc.content = descripcion || '';
}, [titulo, descripcion]);
}
// Uso en componente
usarMetadatos({
titulo: 'Detalles del producto',
descripcion: 'Información completa...'
});
MPA y SPA presentan efnoques complementarios, siendo común implementar soluciones híbridas según necesidaeds específicas de rendimiento y SEO.