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

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?

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:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Budgets de performance (gardez le nombre de demandes bas et les fichiers de petite taille)

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.

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