ADVERTENCIA en presupuestos, máximo excedido para inicial

155

Cuando construyo mi proyecto angular 7 con --prod, tengo una advertencia en los presupuestos.

Tengo un proyecto angular 7, quiero construirlo, pero tengo una advertencia:

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

Estos son detalles en trozos:

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB  [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]

¿Qué son exactamente los presupuestos? ¿Y cómo debo gestionarlos?

Masoud Bimar
fuente
44
Intente comprimir sus imágenes en activos en lugar de editar el archivo angular.json
Ahsan
@ Ahsan, eso es lo que hice. Sigue siendo el mismo mensaje. No estoy seguro de que se trate de activos.
América
@ Enfermera Wee mi nueva respuesta y verifique los enlaces
Masoud Bimar

Respuestas:

250

Abra el archivo angular.json y busque la budgetspalabra clave.

Debería verse así:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
   }
]

Como probablemente haya adivinado, puede aumentar el maximumWarningvalor para evitar esta advertencia, es decir:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   }
]

¿Qué significan los presupuestos ?

Un presupuesto de rendimiento es un grupo de límites a ciertos valores que afectan el rendimiento del sitio, que no pueden excederse en el diseño y desarrollo de ningún proyecto web.

En nuestro caso, el presupuesto es el límite para los tamaños de paquete.

Ver también:

yurzui
fuente
2
¿Puedes explicar qué significa presupuesto?
Stack Overflow
3
@StackOverflow agregado
yurzui
2
Gracias @yurzui por tu respuesta rápida, ¿Es una nueva característica en angular 7? No vimos este error en el ángulo 5. ¿Significa que estamos haciendo algo mal?
Stack Overflow
2
@StackOverflow Se agregó en @angular/cli@7Vea también las novedades en ng7 aquí blog.angular.io/… With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI.
yurzui
23
¿Cómo optimizar para disminuir el tamaño del presupuesto utilizado? en lugar de aumentarlo ...
deadManN
76

¿Qué son los presupuestos angulares de CLI? Los presupuestos son una de las características menos conocidas de la CLI angular. ¡Es una característica bastante pequeña pero muy bonita!

A medida que las aplicaciones crecen en funcionalidad, también crecen en tamaño. Presupuestos es una función de la CLI angular que le permite establecer umbrales presupuestarios en su configuración para garantizar que partes de su aplicación se mantengan dentro de los límites establecidos - Documentación oficial

O, en otras palabras, podemos describir nuestra aplicación Angular como un conjunto de archivos JavaScript compilados llamados paquetes que son producidos por el proceso de construcción. Los presupuestos angulares nos permiten configurar los tamaños esperados de estos paquetes. Más aún, podemos configurar umbrales para condiciones en las que queremos recibir una advertencia o incluso fallar la compilación con un error si el tamaño del paquete se sale demasiado de control.

¿Cómo definir un presupuesto? Los presupuestos angulares se definen en el archivo angular.json. Los presupuestos se definen por proyecto, lo que tiene sentido porque cada aplicación en un espacio de trabajo tiene diferentes necesidades.

Pensando pragmáticamente, solo tiene sentido definir presupuestos para las compilaciones de producción. La compilación de productos crea paquetes con "tamaño real" después de aplicar todas las optimizaciones, como la sacudida de árboles y la minimización de código.

¡Vaya, un error de compilación! Se excedió el tamaño máximo del paquete. Esta es una gran señal que nos dice que algo salió mal ...

  1. Es posible que hayamos experimentado en nuestra función y no hayamos limpiado correctamente
  2. Nuestras herramientas pueden salir mal y realizar una importación automática incorrecta, o seleccionamos un artículo incorrecto de la lista sugerida de importaciones
  3. Podríamos importar cosas de módulos perezosos en ubicaciones inapropiadas
  4. Nuestra nueva función es realmente grande y no se ajusta a los presupuestos existentes

Primer enfoque: ¿están comprimidos sus archivos?

En términos generales, el archivo comprimido tiene solo un 20% del tamaño del archivo original, lo que puede disminuir drásticamente el tiempo de carga inicial de su aplicación. Para verificar si ha comprimido sus archivos, simplemente abra la pestaña de red de la consola del desarrollador. En los "Encabezados de respuesta", si ve "Codificación de contenido: gzip", está listo.

¿Cómo gzip? Si aloja su aplicación Angular en la mayoría de las plataformas en la nube o CDN, no debe preocuparse por este problema, ya que probablemente lo hayan manejado por usted. Sin embargo, si tiene su propio servidor (como NodeJS + expressJS) que sirve su aplicación Angular, definitivamente verifique si los archivos están comprimidos. El siguiente es un ejemplo para comprimir sus activos estáticos en una aplicación NodeJS + expressJS. Difícilmente puede imaginar que esta simple "compresión" de middleware simple reduciría el tamaño de su paquete de 2.21 MB a 495.13 KB.

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

Segundo enfoque :: Analice su paquete angular

Si el tamaño de su paquete es demasiado grande, es posible que desee analizar su paquete porque puede haber usado un paquete de terceros de gran tamaño inapropiado o se olvidó de eliminar algún paquete si ya no lo está usando. Webpack tiene una característica sorprendente para darnos una idea visual de la composición de un paquete webpack.

ingrese la descripción de la imagen aquí

Es muy fácil obtener este gráfico.

  1. npm install -g webpack-bundle-analyzer
  2. En su aplicación Angular, ejecute ng build --stats-json(no use la bandera --prod). Al habilitarlo --stats-json, obtendrá un archivo adicional stats.json
  3. Finalmente, ejecute webpack-bundle-analyzer ./dist/stats.jsony su navegador abrirá la página en localhost: 8888. Diviértete con eso.

ref 1: ¿Cómo me ahorraron el presupuesto los presupuestos CLI angulares y cómo pueden salvar el suyo?

ref 2: Optimiza el tamaño del paquete angular en 4 pasos

Masoud Bimar
fuente
¿Dónde coloca el código de 'compresión' que proporcionó en su aplicación angular?
F3L1X79
1
Si usa qzip en el proyecto nodejs, vea este enlace , para un proyecto angular simplemente puede habilitarlo en el comando de compilación, vea este enlace
Masoud Bimar
2
Para ejecutar el analizador sin instalar el paquete globalmente:npx webpack-bundle-analyzer ./dist/stats.json
michel404
44
En Angular 9 el comando es ng build --statsJson=true. Ver Angular 9 Doc
wami