如何在Angular CLI Webpack中使用预编译器

Question

有没有办法在Angular CLI中使用AOT？

我已经安装了模块(@angular/compiler @angular/compiler-cli)，当我输入ngc -p scr时，它会创建ngFactory.ts文件，并将其编译到dist/tsc-out(在tsconfig中是angular cli默认值)。

不确定下一步该怎么做 :)

祝好

Han

- Han Che

Answer 1

最近的Angular CLI所有beta版本都支持通过以下方式进行AoT:

ng serve --aot
ng build --aot
#and of course
ng build --prod --aot

注意：从Angular CLI 1.0.0-beta.28（发布于2017年2月1日），如果指定了--prod，则默认开启--aot。

- Brocco

---

你知道关于这方面的教程或资源吗？感谢回复！ - Han Che

@HanChe Minko Gechev 是其中一位主要的贡献者，他在 Angular AoT 方面有一篇非常详尽的解释博客文章：http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/ - Ofer Zelig

@OferZelig 感谢您的编辑（将答案与beta版本保持最新并不容易） - Brocco

如果我执行ng-eject会怎样？我如何使用AOT并在生产模式下构建？ - Pratik Kelwalkar

@PratikKelwalkar eject 命令与 ng build 接受相同的参数，并且您可以传入相同的参数。此外，您可以使用不同的设置多次进行 eject。 - Brocco

Answer 2

Angular-cli beta 17现在支持--aot :) !

看看我在一个全新项目上的测试（里面什么都没有）：

编辑1：2016年11月28日：
自beta 21以来，AOT与延迟加载模块一起工作！
我在这里提供了更多细节：https://dev59.com/AZzha4cB1Zd3GeqPBC2A#40788258

编辑2：2017年5月5日：
如果您使用--prod ，则cli将默认使用AOT进行编译。
（几个月以来，但点赞提醒我此帖子！）

编辑3：2017年7月27日：
如果您想进一步减少捆绑包大小，则现在可以通过使用--build-optimizer 运行构建来实现。 在一个小应用程序中，我从1.3Mb减少到了864Kb！

- maxime1992

---

"529KB" 仍然看起来很大。我看过一个视频，说我们可以将其缩小到约“100kb”以下... - Aakash

gzip 可以将文件大小减少约80%。 - Tzach Ovadia

@Akash 我同意。显示文件大小小于100kb的视频很可能没有使用angular-cli。你需要使用闭包编译器，它比webpack具有更好的树摇动功能。 - maxime1992

@Maxime 正如你所提到的，这是一个全新的项目，那么 tree shaking 是否可能更加有效呢？我的意思是说，在 tree shaking 后，一个全新的项目可能有多少 未使用的 模块能够导致项目大小更小...？ - Aakash

@Akash 如我所说，如果你想要更好的树摇，你可能需要使用Google Closure编译器（或Rollup）。 - maxime1992