Question

我正在学习Angular4，并想知道什么是ng build和ng build --prod真正为我们做的。

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

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

任何人都可以解释ng build如何使用和不使用--prod

谢谢

Answer 1

根据angular-cli文件：

--dev/--target=development和--prod/--target=production都是'meta'标志，用于设置其他标志。如果您未指定任何一个，则会获得--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的优点：

在浏览器上运行之前突出显示编译错误，运行时错误和异常，因此命名为Ahead Of Time（AOT）。
如果您在项目中使用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

Angular CLI 1.2.4命令构建

2 个答案: