以及为什么要这样做
本文是系列文章的一部分：
- Angular + FLUX架构—简介
- Angular + FLUX —混合应用程序
- Angular Hybrid应用程序—提前编译
提前（AOT）编译在Angular社区中是一个大词。 每个人都想让它运行。 如果您使用Angular CLI开始一个新项目，那么您会成功。 没有比在终端中包含“-aot”选项更简单的了。
但是，如果您具有自定义Webpack配置怎么办？ 或者您正在使用升级模块，并且具有混合Angular应用程序？ 看看我们如何处理Admin中的这个特定问题-Slido用户的管理界面。
提前与即时
AOT和即时编译（JIT）之间的区别在于编译发生的步骤。 使用AOT，我们正在讨论构建阶段。 它发生在浏览器中运行应用程序之前。 当应用程序在浏览器中运行时，将进行JIT编译。
正如Angular指南中所述：
“在浏览器下载并运行该代码之前，在构建阶段，Angular Ahead-of-Time编译器会将您的Angular HTML和TypeScript代码转换为高效的JavaScript代码。”
启用AOT的优点之一是更快的应用程序渲染。 由于浏览器下载时所有应用程序部分均已编译，因此应用程序的引导时间以及使用过程中的渲染时间将大大减少。
另一个好处可以是较小的捆束尺寸。 当您使用AOT时，由于不再需要@ angular / compiler，因此不需要将其包括在内。 编译后的应用程序可以增加其束大小，但这在很大程度上取决于您的应用程序的细节。
第三， 在模板中发现编译错误的可能性更高，因为编译器会在构建期间通知您。 如果您使用的是Visual Studio Code，则可以使用Angular Language Service扩展，因为它具有实时启用的AOT诊断功能。
启用AOT所需的步骤
发生的第一步是运行npm install @ ngtools / webpack 。
接下来，您必须正确配置Webpack。 在此步骤中，您要配置@ngtools随附的AngularCompilerPlugin。 使用配置参数，您将设置tsconfig和条目文件的位置。 大多数时候，您想为JIT和AOT使用单独的tsconfig。 您稍后将看到原因。
在标准tsconfig中，您需要排除main.aot.ts文件，这是使用AOT编译的应用程序的入口点。 在此文件中，您将导入仅在构建期间可用的文件。 这样，您可以轻松地在JIT和AOT构建之间进行区分，而不会出现任何错误。
用于AOT的Tsconfig很普通。 没什么特别的。
这里的下一个文件演示了如何在JIT和AOT之间拆分构建。 在这种情况下，在开发环境中使用JIT，在生产中使用AOT。
AOT使用platformBrowser而不是platformBrowserDynamic。 接下来的重要步骤是导入工厂文件，这些文件将在构建期间可用。
性能提升
从一开始，我们就想启用AOT是有原因的-为了提高Admin应用程序的性能。 这是对改进之处和保持不变之处的简短比较：
如您所见，即使捆绑包的大小略有增加，初始加载时间也大大减少了。
包起来
启用AOT可以为我们所有用户带来显着改善。 初始加载时间大大缩短，应用程序也加快了速度。
如果您从未考虑过在生产中启用AOT，那么现在是时候了。 您对此主题有任何疑问吗？ 随时联系我。
