Que font ces angular-cli: inline.bundle.js, vendor.bundle.js, main.bundle.js?
Si je vérifie le fichier index.html de angular 2 créé avec angular-cli je peux voir que la page contient seulement 3 fichiers du dossier dist:
inline.bundle.js
vendor.bundle.js
main.bundle.js
Mais maintenant, j'essaie de comprendre ce que fait chaque fichier. J'ai écrit un composant avec angular-cli, j'ai rétrogradé pour pouvoir l'utiliser dans une autre application écrite avec angular 1. Si je viens d'ajouter ces 3 fichiers à mon index.html, plus l'ajout d'application Le fichier .module.ts semble avoir mis à niveau mon application et tout fonctionne. J'essaie de comprendre pourquoi, car le google angular toturial ne parle pas d'angular-cli et comment il peut aider à la migration.
Voyons voir:
inline.bundle.js
Il s'agit d'un chargeur de webpack. Un petit fichier avec les utilitaires Webpack qui sont nécessaires lors du chargement d'autres fichiers.
Finalement, cela sera écrit dans le fichier index.html lui-même et ne sera pas du tout généré en tant que fichier séparé.
vendor.bundle.js
Il est généré par défaut en mode dev et ignoré par défaut en mode prod (ng build -prod ou ng serve -prod).
Il comprend les bibliothèques Angular avec peu ou pas de modification. Ceci pour accélérer le processus de construction. De plus, certaines personnes pensent que c'est une bonne idée de les conserver dans un fichier séparé lorsqu'il ne change pas. beaucoup et puis il peut être mis en cache plus longtemps.
L'approche typique Angular est cependant de les fusionner dans le bundle principal et, ce faisant, d'exécuter l'arborescence Webpack, qui supprime tous les modules EcmaScript/TypeScript qui n'ont jamais été importés à partir d'autres modules dans votre application et ses importations. Cela signifie que le bundle final est beaucoup plus petit. Par exemple, lorsque vous exécutez le compilateur Ahead of Time (AoT), le compilateur Angular) est éliminé par arborescence.
Vous pouvez contrôler explicitement la génération ou non d'un ensemble de fournisseurs distinct en définissant l'argument --vendor-chunk.
main.bundle.js
Votre propre code, et tout ce que vous avez importé, etc., comme expliqué au point précédent.