作为“为大型前端项目”而设计的前端框架,Angular 其实有许多值得参考和学习的设计,本系列主要用于研究这些设计和功能的实现原理。本文主要介绍 Angular 中的 AOT 和 JIT 相关设计。

Angular 应用主要由组件及其 HTML 模板组成。由于浏览器无法直接理解 Angular 所提供的组件和模板,因此 Angular 应用程序需要先进行编译才能在浏览器中运行。

在 Angular 中,提供了两种方式编译 Angular 应用:

  • 即时编译 (JIT,Just in time):它会在运行期间在浏览器中编译你的应用
  • 预先编译(AOT,Ahead of Time):它会在构建时编译你的应用和库

# JIT

在 Angular 8 及更早版本中,默认情况下,在应用程序执行期间,将对模板进行编译,这便是 JIT 编译。

# 工作原理

JIT 编译相对 AOT 而言比较简单,核心逻辑在JitCompiler中。JitCompiler是 Angular 编译器的一个内部模块,它从组件类型开始,提取模板,并最终生成准备链接到应用程序的组件的编译版本。

export class JitCompiler {
  // 编译过程中的一些解析内容缓存
  private _compiledTemplateCache = new Map<Type, CompiledTemplate>();
  private _compiledHostTemplateCache = new Map<Type, CompiledTemplate>();
  private _compiledDirectiveWrapperCache = new Map<Type, Type>();
  private _compiledNgModuleCache = new Map<Type, object>();
  private _sharedStylesheetCount = 0;
  private _addedAotSummaries = new Set<() => any[]>();

  // 模块编译相关方法
  compileModuleSync(moduleType: Type): object {}
  compileModuleAsync(moduleType: Type): Promise<object> {}
  compileModuleAndAllComponentsSync