"analyze": "ng build --prod --stats-json && npx webpack-bundle-analyzer dist/platzi-store/stats-es2015.json"```
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
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aplicando un Performance Budget desde el Angular CLI
5/23Recursos
¿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.jsonde 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.
Aportes 5
Preguntas 2
Ordenar por:
Performance Budget
es una herramienta para colocar minimos de costo para nuestras aplicaciones.
angular.json permite configurar el peso maximo de nuestros paquetes
De igual manera no hace falta normalmente configurarlo ya que angular lo hace por nosotros
budgets
type: initial|anyComponentStyle
maximumWarning: peso en kb, mb
maximumError: peso en kb, mb
warning = te avisa como un warning
maximum = no te deja compilar la aplicacion
APARTE
podemos hacer un script en package.json para ejecutar
el webpack-bundle-analyzer con un npm run analyzer
// package.json
...
"scripts": {
...
"analyzer": "webpack-bundle-analyzer dist/my-project/stats-es2015.json"
...
}
...
Luego para correrlo
npm run analyzer
Performance Budget
Por defecto, Angular establece lÃmites para el peso que debe soportar la app. Si este peso supera estos lÃmites, mostrará una alerta o no permitirá compilar. Para visualizar y modificar estos lÃmites, podemos dirigirnos a nuestro archivo *angular.json en la sección de budget
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"analyzer": "webpack-bundle-analyzer dist/platzi-store-perf/stats-es2015.json"
},
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?