这些 angular-cli 做啥：inline.bundle.js、vendor.bundle.js、main.bundle.js？

Posted 2023-02-23

【中文标题】这些 angular-cli 做啥：inline.bundle.js、vendor.bundle.js、main.bundle.js？

【英文标题】：What these angular-cli do: inline.bundle.js, vendor.bundle.js, main.bundle.js?这些 angular-cli 做什么：inline.bundle.js、vendor.bundle.js、main.bundle.js？

【发布时间】：2017-06-20 00:52:42

【问题描述】：

如果我检查使用 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 文件，好像我升级我的应用程序，一切正常。我试图理解为什么，因为谷歌角度教程没有谈论 angular-cli 以及它如何帮助迁移。

【问题讨论】：

我还添加了 app.module 中的引导程序问题，如升级的角度文档中的详细说明。

【参考方案1】：

让我们看看：

inline.bundle.js

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

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

vendor.bundle.js

这是默认在 dev 模式下生成的，在 prod 模式下默认被忽略（ng build -prod 或 ng serve -prod）。

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

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

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

main.bundle.js

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

【讨论】：

10xm 这很有意义。如果我只是复制这 3 个文件并将它们包含在 angular 1 app index.html 中，这是让 angular 2 在混合应用程序中工作的好方法吗？

没有。我不这么认为。您需要查看@angular/upgrade，我猜这不适用于 Angular CLI，它实际上是 Angular 2+。

我可以添加webpack而不使用inline.bundle.js吗？

不确定你的意思。添加内联文件的是 Webpack。这是一个小型加载程序，用于加载其余文件。你可以在没有 Angular CLI 的情况下直接使用 Webpack，不过如果这就是你的意思的话。

我试图了解我需要在我的 angular 1app 的 index.html 中包含哪些文件，这将帮助我使用 angular 2 进行引导

【参考方案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。

【讨论】：

您好，感谢您抽出宝贵的时间做出贡献。如果还为较早的问题编写答案，这可能对社区非常有帮助。但是，您所写的内容似乎根本没有回答问题。问题是关于生成的文件是什么。你不这么说。您刚刚提到它们已在更新的 Angular 版本中重命名。这可能是一个有效甚至有价值的信息——但它应该进入评论；这不是问题的答案。

完全同意你@Lutz 但我还没有足够的声望点（至少需要 50 个）。