Angular CLI - comment analyser les fichiers de bundle
J'utilise Angular CLI pour construire une application pour la production en utilisant le --prod commutateur. Le bundle est créé dans le répertoire dist. Existe-t-il un moyen de savoir quelles classes et fonctions ont été réellement mises dans le bundle après l'arborescence et toutes les autres étapes?
Vous pouvez utiliser webpack-bundle-analyzer pour inspecter vos bundles.
npm install webpack-bundle-analyzer --save-devmodifiez votre
package.jsonscriptssection avec"analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"npm run analyze
Vous pouvez vérifier cela repo c'est juste une simple angular qui montre comment implémenter le chargement paresseux et elle a webpack-bundle-analyzer déjà configuré comme ci-dessus.
Vous pouvez également configurer Angular CLI budgets pour surveiller la taille de vos bundles.
MISE À JOUR:
Au cas où si vous utilisez console angulaire maintenant il a fonction d'analyse de bundle intégré
Depuis Angular console 7.4, il existe une nouvelle façon d'analyser vos Angular bundles.
- Installez l'extension vscode "Angular Console" par Nrwl technologies.
- Facultatif: si ce n'est pas le cas, transformez votre espace de travail en un espace de travail nrwl-nx avec
ng add @nrwl/schematics(c'est juste un espace de travail étendu angular, mais il fonctionne avec l'espace de travail par défaut angular, aussi)). - Allez dans Projets > Sélectionnez l'application que vous souhaitez créer et exécutez la commande build avec aot et production.
Et c'est tout. La sortie est la suivante. Il contient la taille de l'ensemble et toutes les parties de l'ensemble. Vous pouvez sélectionner le fichier que vous souhaitez analyser (principal/polyfills/1/etc). Il affichera cette tarte pour chacun de ces fichiers. Assez détaillé et facile à utiliser.
