Angular AOT 和 JIT 编译器有什么区别 [英] What is the difference between Angular AOT and JIT compiler

问题描述

我正在深入研究 angular 4，并试图了解编译.我读过 AOT 和 JIT 都将 TypeScript 编译为 JavaScript，无论是在服务器端还是在客户端.如果我在使用 Webpack 构建它时编译它并发出咕噜声并部署那个缩小的 javascript，那么 AOT 和 JIT 怎么会出现在画面中?

I am diving into angular 4 and I am trying to understand the compilation. I've read that AOT and JIT both compile TypeScript to JavaScript whether that is server side or on the client side. If I am compiling it when I build it with Webpack and grunt and deploying that minified javascript how does AOT and JIT even come into the picture?

推荐答案

我读过 AOT 和 JIT 都将 TypeScript 编译为 JavaScript无论是服务器端还是客户端.

I've read that AOT and JIT both compile TypeScript to JavaScript whether that is server side or on the client side.

不，这不是 AOT 和 JIT 编译器所做的.使用 typescript 编译器将 TypeScript 转换为 JavaScript.

No, that is not what AOT and JIT compilers do. TypeScript is transpiled into JavaScript using typescript compiler.

有两个编译器负责编译和代码生成的繁重工作:

There are two compilers that do the hard work of compilation and code generation:

• 查看编译器莉>
• 视图编译器编译组件模板和生成视图工厂.它解析模板中的表达式和 html 元素并经历许多标准编译器阶段:

  The view compiler compiles component templates and generates view factories. It parses expressions and html elements inside the template and goes through many of the standard compiler phases:

  parse-tree (lexer) -> abstract-syntax-tree (parser) -> intermediate-code-tree -> output
  

  提供程序编译器编译模块提供程序并生成模块工厂.

  The provider compiler compiles module providers and generates module factories.

  这两个编译器用于JIT和AOT编译.JIT 和 AOT 编译在获取与组件或模块关联的元数据的方式上有所不同:

  These two compilers are used in both JIT and AOT compilation. JIT and AOT compilations differ in how they get the metadata associated with the component or module:

  // the view compiler needs this data
  
  @Component({
     providers: ...
     template: ...
  })
  
  // the provider compiler needs this data
  
  @NgModule({
     providers: ...
  });
  

  JIT 编译器使用运行时来获取数据.装饰器函数 @Component 和 @NgModule 被执行并且 他们将元数据附加到组件或模块类，稍后由 Angular 编译器使用反射功能(反射库)读取.

  JIT compiler uses runtime to get the data. The decorator functions @Component and @NgModule are executed and they attach metadata to the component or module class that is later read by Angular compilers using reflective capabiliteis (Reflect library).

  AOT 编译器使用 typescript 编译器提供的静态代码分析来提取元数据，不依赖于代码评估.因此，与 JIT 编译器相比，它有点受限，因为它无法评估显式代码 - 例如它需要导出一个函数:

  AOT compiler uses static code analysis provided by typescript compiler to extract metadata and doesn't rely on code evaluation. Hence it's a bit limited when compared to JIT compiler since it can't evaluate in-explicit code - for example it requires exporting a function:

  // this module scoped function
  
  function declarations() {
    return [
      SomeComponent
    ]
  }
  
  // should be exported
  
  export function declarations() {
    return [
      SomeComponent
    ];
  }
  @NgModule({
    declarations: declarations(),
  })
  export class SomeModule {}
  

  同样，JIT 和 AOT 编译器大多是提取与组件或模块关联的元数据的包装器，它们都使用底层视图和提供程序编译器来生成工厂.

  Again, both JIT and AOT compilers are mostly wrappers to extract metadata associated with a component or module and they both use the underlying view and provider compiler to generate factories.

  如果我在用 Webpack 构建它时正在编译它，然后 grunt 和部署那个缩小的 javascript AOT 和 JIT 是如何进入的图片?

  If I am compiling it when I build it with Webpack and grunt and deploying that minified javascript how does AOT and JIT even come into the picture?

  Angular 提供了 webpack 插件，可在构建期间从打字稿执行转译.这个插件还可以 AOT 编译你的项目，这样你就不会在包中包含 JIT 编译器，也不会在客户端执行编译.

  Angular provides webpack plugin that performs transpilation from typescript during build. This plugin can also AOT compile your project so that you don't include JIT compiler into the bundle and don't perform compilation on the client.

  这篇关于Angular AOT 和 JIT 编译器有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！