angular - 这些 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 文件，看起来我升级了我的应用程序，一切正常。我试图理解为什么，因为 google angular 教程没有谈论 angular-cli 以及它如何帮助迁移。

Answer 1

让我们看看:

内联.bundle.js

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

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

vendor.bundle.js

这在 dev 模式下默认生成，在 prod 模式下默认忽略(ng build -prod 或 ng serve -prod)。

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

不过，典型的 Angular 方法是将它们合并到主包中，并在这样做时运行 Webpack tree-shaking，这会删除从未从应用程序及其导入中的任何其他模块导入的所有 EcmaScript/TypeScript 模块。这意味着最终的 bundle 要小得多。例如，当运行 Ahead of Time 编译器 (AoT) 时，Angular 编译器会被 tree-shaking 掉。

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

main.bundle.js

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