Angular CLI 1.2.4 命令 ng build 的解释答案

【问题标题】：Explanation on Angular CLI 1.2.4 command ng buildAngular CLI 1.2.4 命令 ng build 的解释
【发布时间】：2017-12-31 16:18:40
【问题描述】：

我正在学习 Angular4，想知道 ng build 和 ng build --prod 对我们真正有什么作用。

当使用 ng build 运行时，例如 main.bundle.js、main.bundle.js.map、在 dist 文件夹中生成

但是使用 ng build --prod，只有例如 main.90e798078cb11a3159ce.bundle.js，在 dist 文件夹中生成

谁能解释一下 ng build 如何使用和不使用 --prod

谢谢

【问题讨论】：

github.com/angular/angular-cli/wiki/…

标签： angular angular-cli

【解决方案1】：

ng build –prod OR ng build

使用 --prod 标志允许 Angular 进行提前编译 (AOT)。

AOT 提前编译

Angular Ahead-of-Time (AOT) 编译器在浏览器下载和运行代码之前的构建阶段将您的 Angular HTML 和 TypeScript 代码转换为高效的 JavaScript 代码。

AOT 的优势：

在浏览器上运行之前突出显示编译错误、运行时错误和异常，因此得名 Ahead Of Time (AOT)。
如果您在项目中使用 ng build 来构建应用程序，如果您注意到 build 目录中 vendor.bundle.js 和 vendor.bundle.js.map 文件的文件大小，它将位于 MBS 中下载到浏览器并让我们的应用程序加载太多。

但另一方面，如果您使用标志 ng build –prod，您会注意到此文件过度减少到 200 KBS 意味着大小减少了 100 倍或更多。

因此，我建议您在构建 Angular 应用程序时使用 AOT，使用 --prod 标志。

如果您想进一步阅读和了解有关此主题的信息，请参阅以下网站： https://angular.io/guide/aot-compiler

【讨论】：

【解决方案2】：

根据 angular-cli 文档：

--dev/--target=development 和 --prod/--target=production 都是“元”标志，用于设置其他标志。如果您不指定任何一个，您将获得--dev 默认值。

以及它们之间的区别在此链接中进行了说明：https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

  Flag                 --dev    --prod
--aot                   false     true
--environment            dev      prod
--output-hashing        media      all
--sourcemaps             true     false
--extract-css           false     true

【讨论】：

非常感谢@echonax 的回答。你的回答很有帮助。无论如何，我的问题可能是模棱两可的。我想了解声明性或简要了解它们的工作原理，例如， ng serve 将文件编译为 ... 并使用 ....map 来做 ... 或者如果无法解释，您能否建议任何来源或任何我可以自学的方法
@Gibi 哦，我不知道它的整个编译过程，但它是从 ember-cli 派生的。也许您可以查看他们的文档和源代码，但正如我所说，我自己还没有深入研究。