这些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

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