Aplicando un Performance Budget desde el Angular CLI

Contenido del curso

Introducción

1
Angular 8 Performace
00:47 min

Analizando el tamaño del Bundle

Aumenta la velocidad de navegación

Rendimiento en tiempo de ejecución

Conclusiones

23
Conclusiones
00:37 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:45

Aplicando un Performance Budget desde el Angular CLI

Curso de Rendimiento en Angular

Clase 5 de 23

Clase 5 / 23

Recursos

¿Cómo crear un presupuesto de peso para tu aplicación en Angular?

Establecer un presupuesto de peso es crucial en el desarrollo de aplicaciones web porque determina la rapidez de carga y el rendimiento de tu sitio. Angular ofrece herramientas y prácticas que te permiten definir límites precisos para mantener tu aplicación optimizada. Comprender estas herramientas te ayudará a mejorar la experiencia del usuario y a evitar retrasos innecesarios.

¿Qué es un presupuesto de peso en Angular?

Un presupuesto de peso es básicamente un conjunto de límites predefinidos que se establecen en una aplicación para asegurarse de que no supere un tamaño específico. Esta práctica ayuda a identificar rápidamente los componentes que incrementan el tamaño de la aplicación. Angular ofrece esta funcionalidad mediante Angular CLI, estableciendo alertas cuando el presupuesto de peso inicial excede 2 megabytes y generando errores si supera 5 megabytes.

¿Cómo establecer y calcular un presupuesto de peso?

Para establecer un presupuesto de peso, puedes seguir estos pasos:

Utiliza herramientas de cálculo: Existen calculadoras en línea que estiman el tiempo de carga basándose en el peso de tus archivos HTML minimizados, CSS, JavaScript e imágenes.
Configuración en Angular: Accede al archivo angular.json de tu proyecto y ajusta las configuraciones predeterminadas de presupuesto según tus necesidades.
Revisar alertas y errores: Angular por defecto lanzará alertas o errores si el tamaño de la carga inicial de tu aplicación supera los límites establecidos.

Esta práctica no solo ayuda a identificar problemas de rendimiento potenciales, sino que también asegura que el usuario final tendrá una experiencia más fluida.

¿Cómo automatizar la generación de reportes de peso?

Angular permite automatizar la generación de reportes de peso durante el proceso de compilación. Puedes integrar comandos directamente en tus scripts de npm para obtener reportes de presupuesto de manera automática.

"scripts": {
  "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
}

Al agregar un script como el anterior dentro de tu archivo package.json, puedes ejecutar la tarea de análisis con un simple npm run analyze, lo cual generará un reporte detallado sobre el peso de tu aplicación.

¿Qué técnicas usar para optimizar el peso de la aplicación?

Una vez establecidos los presupuestos, es fundamental implementar técnicas que te ayuden a mantener o reducir el tamaño de tu aplicación:

Lazy Loading: Carga diferida de módulos por demanda.
Tree Shaking: Elimina código muerto durante el proceso de compilación.
Optimización de imágenes: Utiliza imágenes de menor resolución y webp.
Minificar CSS y JavaScript: Reducir el tamaño de los archivos al quitar espacios y comentarios innecesarios.

Aplicar estas técnicas no solo contribuirá a respetar tu presupuesto de peso, sino que también mejorará significativamente el rendimiento general de tu aplicación.

Aprender y aplicar estas prácticas puede parecer abrumador al principio, pero con paciencia y práctica, lograrás hacer que tus aplicaciones sean más eficientes. Sigue explorando el fascinante mundo de Angular para seguir creciendo como desarrollador.

Introducción

Angular 8 Performace

Analizando el tamaño del Bundle

¿Qué es un bundle size? Tree shaking y su importancia

Implementando Webpack Bundle Analyzer

Moment vs date-fns

Aplicando un Performance Budget desde el Angular CLI

Aumenta la velocidad de navegación

Code splitting a nivel de rutas

Implementando una propia estrategia de precarga

Implementando QuicklinkStrategy

Usando Machine Learning para predecir rutas

Google Analytics y Angular

Implementando GuessJs

Precarga con Service workers

¿Qué es Server Side Render?

Implementando Angular Universal

Cuidados con SSR y Angular

Rendimiento en tiempo de ejecución

¿Qué es el Change Detection?

Preparando módulo para Change Detection

Analizando el Change Detection

Optimización de componentes con OnPush

Usando pipes puros

subscribe

Async

Conclusiones

Conclusiones

Aplicando un Performance Budget desde el Angular CLI

Progreso del curso

Introducción

Analizando el tamaño del Bundle

Aumenta la velocidad de navegación

Rendimiento en tiempo de ejecución

Conclusiones

Recursos

Recursos