Angular 包是如何构建的

Question

Angular 构建生成了哪些不同的文件？我注意到其中有 6 个：

• main.js
• polyfill.js
• runtime.js
• scripts.js
• vendor.js
• styles.js

我想 Angular 是用来webpack构建的。但我无法找到任何可以解释这些文件包含的内容的资源。例如。main.js包含我的应用程序代码吗？如果我使用第 3 方npm软件包，它们会进入scripts.js还是vendor.js？为什么有一个.js文件styles？（我以为styles是一.css件事）。

Answer 1

在最新版本中，实现了差异加载，因此它会生成每个文件中的两个，第一个在 ES5 中，第二个在 ES2015 中

\n

在文件名和扩展名之间还有一个哈希值。在差异加载的情况下，文件后面还有一个 js 版本，-文件名如下所示name-jsversion.hash.js

\n

runtime.js - 在链接中它被称为inline它在 Angular 6.0 中被重命名为runtime

\n

\n

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

\n

\n

供应商.js

\n

\n

此文件包含导入到应用程序 (app.module) 中的所有库，包括 Angular 库。导入到您的应用程序中的第三方库也会编译到此文件中（例如 lodash、moment 等）。

\n

警告这个文件在开发编译（ng build）后会很大，因为它包含在浏览器中编译 Angular 所需的所有内容。在将应用发布到生产环境之前，\n始终运行产品构建 (ng build \xe2\x80\x93prod)。产品构建运行提前 (AoT) 编译并\n执行 tree-shaking。

\n

\n

main.js

\n

\n

这就是动作发生的地方。该文件包含您的所有代码。

\n

\n

polyfills.js

\n

\n

这一点应该是不言自明的。它包含您在 polyfills.ts 文件中声明的所有 polyfill。

\n

\n

脚本.js

\n

\n

这一点也应该是不言自明的。它包含您在文件的脚本部分中声明的脚本angular.json。

\n

\n

1.js或2.js或 ... - 数字正在递增。如果没有延迟加载的模块，则不会生成此文件。

\n

\n

这是一个包含延迟加载模块的文件，您有多少个延迟加载模块就会生成多少个文件。

\n

\n