关于 Angular CLI 1.2.4 命令 ng build 的说明

Question

我正在学习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构建如何在有和没有--prod的情况下工作

谢谢

Answer 1

根据 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

Answer 2

ng build–prod OR ng build

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

AOT 提前编译

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

AOT的优势：

1. 在浏览器上运行之前突出显示编译错误、运行时错误和异常，因此称为提前 (AOT(。

2. 如果您在项目中使用 ng build 来构建应用程序，如果您注意到构建目录中的 vendor.bundle.js 和 vendor.bundle.js.map 文件的文件大小，它将在 MBS 中下载到浏览器中并使我们的应用程序也加载。

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

---

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

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