ATTENTION dans les budgets, maximum dépassé pour la première


155

Lors de la construction de mon projet angular 7 avec --prod, j'ai un avertissement dans les budgets.

J'ai un projet angular 7, je veux le construire, mais j'ai un avertissement:

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

ce sont des détails de bloc:

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]

que sont exactement les budgets? et comment dois-je les gérer?


4
Essayez de compresser vos images dans les actifs au lieu de modifier le fichier angular.json
Ahsan

@Ahsan c'est ce que j'ai fait. Toujours le même message. Pas sûr qu'il s'agisse d'actifs.
Emerica

@Curse Wee ma nouvelle réponse et vérifiez les liens
Masoud Bimar

Réponses:


253

Ouvrez le fichier angular.json et recherchez le budgetsmot-clé.

Cela devrait ressembler à:

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

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

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

Que signifient les budgets ?

Un budget de performance est un groupe de limites à certaines valeurs qui affectent les performances du site, qui ne peuvent être dépassées dans la conception et le développement d'un projet Web.

Dans notre cas, le budget est la limite des tailles de bundle.

Voir également:


2
Pouvez-vous expliquer ce que signifie le budget?
Débordement de pile le

3
@StackOverflow Ajouté
yurzui

2
Merci @yurzui pour votre réponse rapide, est-ce une nouvelle fonctionnalité dans Angular 7? Nous n'avons pas vu cette erreur dans angulaire 5. Cela signifie-t-il que nous faisons quelque chose de mal?
Débordement de pile le

2
@StackOverflow A été ajouté dans @angular/cli@7Voir aussi les nouveautés de ng7 ici blog.angular.io With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI.
...

23
comment optimiser pour diminuer la taille du budget utilisé? au lieu de l'augmenter ...
deadManN

76

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

Au fur et à mesure que les applications se développent en fonctionnalités, elles augmentent également en taille. Budgets est une fonctionnalité de la CLI angulaire qui vous permet de définir des seuils budgétaires dans votre configuration pour garantir que certaines parties de votre application restent dans les limites que vous définissez - 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 construction. Les budgets angulaires nous permettent de configurer les tailles attendues de ces bundles. De plus, nous pouvons configurer des seuils pour les conditions lorsque nous voulons recevoir un avertissement ou même échouer la construction avec une erreur si la taille du bundle devient trop incontrôlable!

Comment définir un budget? Les budgets angulaires sont définis dans le fichier angular.json. Les budgets sont définis par projet, ce qui est logique car chaque application d'un espace de travail a des besoins différents.

En pensant de manière pragmatique, il est logique de définir des budgets pour les versions de production. Prod build crée des bundles avec la «vraie taille» après avoir appliqué toutes les optimisations telles que le tremblement d'arbre et la minimisation du code.

Oups, une erreur de construction! La taille maximale du bundle a été dépassée. C'est un excellent signal qui nous dit que quelque chose s'est mal passé…

  1. Nous avons peut-être expérimenté notre fonctionnalité et n'avons pas nettoyé correctement
  2. Notre outillage peut mal tourner et effectuer une mauvaise importation automatique, ou nous choisissons le mauvais article dans la liste suggérée d'importations
  3. Nous pourrions importer des éléments à partir de modules paresseux dans des emplacements inappropriés
  4. Notre nouvelle fonctionnalité est vraiment grande et ne rentre pas dans les budgets existants

Première approche: vos fichiers sont-ils gzippés?

De manière générale, le fichier gzippé n'a qu'environ 20% de la taille du fichier d'origine, ce qui peut considérablement réduire le temps de chargement initial de votre application. Pour vérifier si vous avez gzippé vos fichiers, 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", vous êtes prêt à partir.

Comment gzip? Si vous hébergez votre application Angular sur la plupart des plates-formes cloud ou CDN, ne vous inquiétez pas de ce problème car ils l'ont probablement géré pour vous. Cependant, si vous avez votre propre serveur (tel que NodeJS + expressJS) servant votre application Angular, vérifiez définitivement si les fichiers sont gzippés. Voici un exemple pour gzip vos actifs statiques dans une application NodeJS + expressJS. Vous pouvez difficilement imaginer que cette simple «compression» middleware 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 angulaire

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

entrez la description de l'image ici

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 d'indicateur --prod). En activant, --stats-jsonvous obtiendrez un fichier supplémentaire stats.json
  3. Enfin, exécutez webpack-bundle-analyzer ./dist/stats.jsonet votre navigateur affichera la page à localhost: 8888. Aie du plaisir avec ça.

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

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


Où mettez-vous le code de «compression» que vous avez fourni dans votre application angulaire?
F3L1X79

1
Si vous utilisez qzip dans le projet nodejs, voir ce lien , pour le projet angulaire, vous pouvez simplement l'activer sur la commande de construction voir ce lien
Masoud Bimar

2
Pour exécuter l'analyseur sans installer le package globalement:npx webpack-bundle-analyzer ./dist/stats.json
michel404

4
Dans Angular 9, la commande est ng build --statsJson=true. Voir Angular 9 Doc
wami
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.