ADVERTENCIA en presupuestos, máximo excedido para inicial

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?

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:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Presupuestos de rendimiento (Mantenga los recuentos de solicitudes bajos y los tamaños de archivo pequeños)

¿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.

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