这些angular-cli做了什么：inline.bundle.js，vendor.bundle.js，main.bundle.js？

Question

如果我检查使用angular-cli创建的angular 2项目的index.html文件，我可以看到该页面只包含来自dist文件夹的3个文件：

inline.bundle.js
vendor.bundle.js
main.bundle.js

但现在我试图了解每个文件的内容。我使用angular-cli编写了组件，我已降级，所以我可以在另一个用angular 1编写的应用程序中使用它。如果我只是将这3个文件添加到我的index.html，再加上app.module.ts文件，似乎我已升级我的应用程序，一切正常。我正试图解除原因，因为谷歌角度不是在谈论角度cli以及它如何帮助迁移。

Answer 1

让我们看看：

inline.bundle.js

这是一个webpack加载器。一个带有Webpack实用程序的小文件，在加载其他文件时是必需的。

最终这将写入index.html文件本身，而不是作为单独的文件生成。

vendor.bundle.js

这是默认情况下在开发模式下生成的，默认情况下会在生产模式下忽略（ng build -prod或ng serve -prod）。

它包含很少或没有修改的Angular库。这是为了加快构建过程。还有一些人认为，当它们没有太大变化时，将它们保存在一个单独的文件中是个好主意，然后可以将其缓存更长时间。

典型的Angular方法是将它们合并到主包中，当这样做时，运行Webpack树抖动，这将删除从未从应用程序中的任何其他模块及其导入导入的任何EcmaScript / TypeScript模块。这意味着最终的捆绑要小得多。例如，当运行Ahead of Time编译器（AoT）时，Angular Compiler会被树状结构化。

您可以通过设置参数--vendor-chunk显式控制是否生成单独的供应商捆绑包。

main.bundle.js

您自己的代码，以及您导入的任何其他内容，如前一点所述。

Answer 2

从Angular 6开始，生成的文件名称中不再包含.bundle或.chunk。 main.bundle.js现在是main.js，admin.module.chunk.js现在是admin-admin-module-ngfactory.js，反映出我的AdminModule在项目的admin目录中。这样一来，人们可以在不同的位置拥有两个名称相同的模块。并且inline.bundle.js已重命名为runtime.js。