angulaire 2/4: différence entre scripts.bundle.js et vendor.bundle.js

Question

angulaire 4: après la commande en cours d'exécution: ng build J'ai cette structure

0.chunk.js  favicon.ico   polyfills.bundle.js.map 
0.chunk.js.map index.html   scripts.bundle.js 
1.chunk.js  inline.bundle.js  scripts.bundle.js.map 
1.chunk.js.map inline.bundle.js.map styles.bundle.js 
2.chunk.js  main.bundle.js  styles.bundle.js.map 
2.chunk.js.map main.bundle.js.map vendor.bundle.js 
assets   polyfills.bundle.js vendor.bundle.js.map 

Quelle est la différence entre scripts.bundle.js et vendor.bundle.js?

Je pense que la différence est que scripts.bundle.js détient tous les .js fichiers externes et vendor.bundle.js détient tous les modules créés.

EDIT

mais je peux importer des fichiers de .jsnode_modules dans vendor.bundle.js et scripts.bundle.js. Quelle est la meilleure approche: l'importation .js fichiers dans des modules ou en les ajoutant dans .angular-cli.json s scripts objet ???

~ Merci beaucoup pour votre aide!

Answer 1

scripts.bundle.js représente la section scripts que vous avez configuré dans .angular-cli.json
vendor.bundle.jsnpm modules vous contiennent les référencez dans votre app.module.

La meilleure façon de comprendre ce qui est à l'intérieur de vos bottes est d'utiliser webpack-bundle-analyzer

Ajouter "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json", à votre package.json et une fois que vous npm install webpack-bundle-analyzer il suffit d'exécuter npm run analyze

Le but de l'article scripts de .angular-cli.json est de gérer les scripts hérités, mais vous pouvez également utiliser cela pour améliorer votre histoire de chargement paresseux. Dites seulement vos morceaux en s'appuyant sur certains npm module. Dans ce cas, il n'est pas nécessaire de placer ce module npm dans vendor.bundle.js, car il peut être chargé juste avant le chargement du bloc associé.

Plus de détails sur les scripts section sur https://github.com/angular/angular-cli/wiki/stories-global-scripts