如何在 Angular cli webpack 中使用提前编译器答案

【问题标题】：how to use ahead-of-time compiler with angular cli webpack如何在 Angular cli webpack 中使用提前编译器
【发布时间】：2016-08-26 13:32:54
【问题描述】：

有没有办法将 AOT 与 angular cli 一起使用？

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

不知道如何从这里开始:)

干杯

韩

【问题讨论】：

【解决方案1】：

Angular CLI 的所有最新测试版都通过以下方式支持 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 默认处于启用状态。

【讨论】：

你知道这方面的资源教程吗？感谢您的回复！
@HanChe Minko Gechev，主要贡献者之一，在 Angular AoT 上有一篇非常透彻的解释博文：blog.mgechev.com/2016/08/14/…
@OferZelig 感谢您的编辑（使答案与测试版保持同步并不容易）
如果我们使用'aot'来构建和服务，那么原来的main.ts会发生什么？我们是否需要像通常那样修改这个文件来启用 AOT？例如。在这个文件中使用模块工厂。
使用 AOT 不需要更改与 AOT 相关的代码。

【解决方案2】：

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

查看我对一个全新项目的测试（其中没有任何内容）：

编辑 1：2016 年 11 月 28 日：
从 beta 21 开始，AOT 与延迟加载的模块一起工作 :) ！
我在这里提供了更多细节：https://stackoverflow.com/a/40788258/2398593

编辑 2：2017 年 5 月 5 日：
如果您使用 --prod，则默认情况下，cli 使用 AOT 编译。
（几个月以来，一个upvote 让我想起了那个帖子！）

编辑 3：2017 年 7 月 27 日：
如果你想进一步减少你的包大小，现在可以通过使用--build-optimizer 运行构建。在一个小应用程序上，我从 1.3Mb 变成了 864Kb！

【讨论】：

529KB 看起来仍然很大。我看到一个视频说我们可以在下面~100kb...
gzip 可以减少 ~80%
@Akash 我同意。显示小于 100kb 的捆绑包的视频可能未使用 angular-cli。你需要闭包编译器，它比 webpack 具有更好的树抖动功能。
@Maxime 正如您提到的它是一个全新的 项目，摇树是否有可能更有效？我的意思是，在 tree shaking...之后，一个新项目需要多少个 unused 模块才能导致 smaller 项目大小？跨度>
@Akash 正如我所说，如果您想要更好的摇树效果，您可能需要使用 google 闭包编译器（或汇总）