Introducción: el rendimiento es una característica En un mercado donde el 53% de los usuarios de dispositivos móviles abandonan una página que tarda más de 3 segundos en cargarse (fuente: Google/SOASTA), el rendimiento no es una optimización opcional: es un requisito del producto. Para las aplicaciones Angular, esto se traduce en elecciones arquitectónicas precisas, herramientas de creación de perfiles integradas y estrategias de renderizado inteligentes. En esta guía, exploramos las técnicas más efectivas para optimizar una aplicación Angular (desde la compilación hasta el empaquetado, desde la detección de cambios hasta el almacenamiento en caché HTTP) con ejemplos de código reales y métricas de referencia. Temas: #Angular #Rendimiento #Carga diferida #Detección de cambios #Desarrollo web Sección 1: Compilación AOT y compilación de compilación optimizada antes de tiempo (AOT) Angular compila plantillas HTML en código JavaScript ya durante la fase de compilación, no en tiempo de ejecución en el navegador. Desde Angular 9, la compilación AOT está habilitada de forma predeterminada en producción y brinda tres beneficios mensurables: Paquete más pequeño: el compilador Angular ( @angular/compiler ) no está incluido en el paquete final. Representación más rápida: el navegador recibe JavaScript precompilado. Errores tempranos: los problemas se descubren durante la compilación. # Producción Construcción ng compilación --configuración producción Agitar árboles y análisis de paquetes // ❌ Importación completa import * as _ from 'lodash'; // ✅ Importación específica de fragmentos de 'lodash/chunk'; // ✅ Sin dependencias const resultado = [[1, 2], [3, 4]]; Sección 2: Carga diferida: cargue solo lo que necesita // app.routes.ts import { Routes } from '@angular/router'; export const APP_ROUTES: Rutas = [ { ruta: '', loadComponent: () => import('./features/home/home.component').luego(c => c.HomeComponent), }, { ruta: 'admin', loadChildren: () => import('./features/admin/admin.routes').luego(m => m.ADMIN_ROUTES), }, { ruta: 'blog', loadChildren: () => import('./features/blog/blog.routes').luego(m => m.
BLOG_ROUTES), }, { ruta: 'proyectos', loadComponent: () => import('./features/projects/projects.component').luego(c => c.ProjectsComponent), }, ]; Estrategia de precarga // app.config.ts import {ApplicationConfig} from '@angular/core'; importar {proporcionarRouter, withPreloading, PreloadAllModules} desde '@angular/router'; importar {APP_ROUTES} desde './app.routes'; exportar const appConfig: ApplicationConfig = { proveedores: [ provideRouter(APP_ROUTES, withPreloading(PreloadAllModules)), ], }; Sección 3: Detección de cambios // Cambio de estrategia OnPushDetection: ChangeDetectionStrategy.OnPush; // ❌ Mutación this.post.title = 'Nuevo título'; // ✅ Nueva referencia this.post = { ...this.post, title: 'Nuevo Título' }; Las señales importan {señal, calculada} desde '@angular/core'; recuento constante = señal (0); const duplicado = calculado(() => contar() * 2); Sección 4: Optimización HTTP // Interceptor de caché const cache = new Map(); if (cache.has(req.url)) { retorno de(cache.get(req.url)); } Sección 5: Optimización de imágenes Sección 6: Dependencias de terceros // ❌ Importación de biblioteca pesada momento desde 'momento'; // ✅ Alternativa nativa new Intl.DateTimeFormat('it-IT').format(new Date()); Sección 7: Faro de herramientas de creación de perfiles https://tuo-sito.com Resumen ✅ Construir producción ✅ Carga diferida ✅ OnPush ✅ Caché HTTP Conclusión La optimización de una aplicación Angular es un proceso continuo que combina arquitectura, buenas prácticas de desarrollo y monitoreo constante del rendimiento. El primer paso es siempre medir: herramientas como Lighthouse y Angular DevTools ayudan a identificar los verdaderos cuellos de botella.