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/23
Recursos

Aportes 5

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

"analyze": "ng build --prod --stats-json && npx webpack-bundle-analyzer dist/platzi-store/stats-es2015.json"```

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"
  },