Angular 2/4 : what is the difference between the scripts. bundle.js 和 vendor.bundle.js？

Question

Angular 4:运行命令后:ng build 我有这个结构

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

What is the difference between the scripts.bundle.js and the vendor.bundle.js?

我认为不同之处在于，scripts.bundle.js 包含所有外部 .js 文件，而 vendor.bundle.js 包含所有创建的模块。

编辑

but I can import .js files from node_modules into the vendor.bundle.js and the scripts.bundle.js. What the best approach is: importing .js files into modules or adding them into the .angular-cli.jsons scripts object?

~非常感谢您的帮助!

Answer 1

scripts.bundle.js 表示您在 .angular-cli.json
中配置的 scripts 部分vendor.bundle.js 包含您在 app.module 中引用的 npm 模块。

The better way to figure out what is inside your bundles is to use webpack-bundle-analyzer

添加 "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json", 到你的 package.json 一旦你 npm install webpack-bundle-analyzer 运行 npm run analyze

.angular-cli.json 的 scripts 部分的目的是处理遗留脚本，但您也可以使用它来改进您的延迟加载故事。只说你的 block 依赖于一些特定的 npm 模块。在这种情况下，不需要将该 npm 模块放入 vendor.bundle.js，因为它可以在加载相关 block 之前加载。

有关 https://github.com/angular/angular-cli/wiki/stories-global-scripts 上脚本部分的更多详细信息