ATTENTION dans les budgets, maximum dépassé pour initial

Question

Lors de la construction de mon projet Angular 7 avec --prod, je reçois un avertissement dans budgets.

J'ai un projet Angular 7. J'essaie de le construire, mais je continue de recevoir l'avertissement suivant:

ATTENTION dans budgets, maximum dépassé pour initial. Le budget de 2 Mo a été dépassé de 1,77 Mo

Voici les détails des chunks:

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 ko  [rendu]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1,41 ko [entry] [rendu]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3,34 Mo [initial] [rendu]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58,2 ko [initial] [rendu]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 ko [initial] [rendu]

Quels sont exactement les budgets? Comment devrais-je les gérer?

Answer 1

Ouvrez le fichier angular.json et trouvez le mot-clé budgets.

Cela devrait ressembler à:

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

Comme vous l'avez probablement deviné, vous pouvez augmenter la valeur de maximumWarning pour éviter cet avertissement, c'est-à-dire:

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

Que signifie budgets ?

Un budget de performance est un ensemble de limites à certaines valeurs qui affectent les performances du site, qui ne doivent pas être dépassées dans la conception et le développement de tout projet web.

Dans notre cas, le budget représente la limite de tailles de bundle.

Voir aussi:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Performance Budgets (Keep Request Counts Low And File Sizes Small)

Answer 2

Qu'est-ce que les budgets Angular CLI? Les budgets sont l'une des fonctionnalités les moins connues de l'Angular CLI. C'est une fonctionnalité plutôt petite mais très astucieuse!

À mesure que les applications évoluent en fonctionnalités, elles grandissent également en taille. Les budgets sont une fonctionnalité de l'Angular CLI qui vous permet de définir des seuils de budget dans votre configuration pour garantir que certaines parties de votre application restent dans les limites que vous avez définies — Documentation officielle

Ou en d'autres termes, nous pouvons décrire notre application Angular comme un ensemble de fichiers JavaScript compilés appelés bundles qui sont produits par le processus de build. Les budgets permettent de configurer les tailles attendues de ces bundles. De plus, nous pouvons configurer des seuils pour les conditions où nous voulons recevoir un avertissement ou même arrêter la build avec une erreur si la taille du bundle devient trop incontrôlable!

Comment Définir un Budget? Les budgets Angular sont définis dans le fichier angular.json. Les budgets sont définis par projet, ce qui a du sens car chaque application dans un espace de travail a des besoins différents.

De manière pragmatique, il est logique de définir des budgets pour les builds de production. La build de prod crée des bundles avec la "vraie taille" après l'application de toutes les optimisations comme le shaking et la minimisation de code.

Oups, une erreur de build! La taille maximale du bundle a été dépassée. C'est un excellent signal qui nous indique qu'il y a un problème...

1. Nous avons peut-être expérimenté dans notre fonctionnalité et n'avons pas nettoyé correctement
2. Nos outils peuvent dysfonctionner et faire une mauvaise auto-importation, ou nous sélectionnons un mauvais élément dans la liste suggérée d'imports
3. Nous pourrions importer des éléments depuis des modules paresseux à des endroits inappropriés
4. Notre nouvelle fonctionnalité est tout simplement très grande et ne rentre pas dans les budgets existants

Première Approche: Vos fichiers sont-ils gzippés?

En règle générale, un fichier gzippé ne représente que 20% de la taille du fichier original, ce qui peut réduire considérablement le temps de chargement initial de votre application. Pour vérifier si vos fichiers sont gzippés, ouvrez simplement l'onglet réseau de la console développeur. Dans les "En-têtes de réponse", si vous voyez "Content-Encoding: gzip", tout va bien.

Comment gipper? Si vous hébergez votre application Angular sur la plupart des plates-formes cloud ou CDN, vous n'avez pas à vous soucier de ce problème car ils l'ont probablement déjà traité pour vous. Cependant, si vous utilisez votre propre serveur (comme NodeJS + expressJS) pour servir votre application Angular, vérifiez définitivement si les fichiers sont gzippés. Voici un exemple pour gzipper vos ressources statiques dans une application NodeJS + expressJS. Vous pouvez difficilement imaginer que ce middleware "compression" ultra simple réduirait la taille de votre bundle de 2,21 Mo à 495,13 Ko.

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

Deuxième Approche: Analysez votre bundle Angular

Si la taille de votre bundle devient trop importante, vous voudrez peut-être l'analyser car vous avez peut-être utilisé un package tiers trop volumineux ou oublié de supprimer certains packages si vous ne les utilisez plus. Webpack a une fonctionnalité incroyable pour nous donner une idée visuelle de la composition d'un bundle webpack.

C'est super facile d'obtenir ce graphique.

1. npm install -g webpack-bundle-analyzer
2. Dans votre application Angular, exécutez ng build --stats-json (n'utilisez pas le drapeau --prod). En activant --stats-json, vous obtiendrez un fichier supplémentaire stats.json
3. Enfin, exécutez webpack-bundle-analyzer ./dist/stats.json et votre navigateur ouvrira la page à localhost:8888. Amusez-vous bien avec ça.

ref 1: Comment les budgets Angular CLI ont-ils sauvé ma journée et comment peuvent-ils sauver la vôtre

ref 2: Optimiser la taille du bundle Angular en 4 étapes

Answer 3

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

J'ai utilisé ceci mais cela ne fonctionne pas. Ensuite, j'ai fait ceci:

"budgets": [ { "type": "initial", "maximumWarning": "20mb", "maximumError": "25mb" }, { "type": "anyComponentStyle", "maximumWarning": "20mb", "maximumError": "25mb" } ]

Answer 4

Dans mon cas, j'ai dû changer ainsi, la solution acceptée ne fonctionnait pas. J'utilise TensorFlow.js dans Angular.

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