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

问题描述

我正在深入角度4，并试图了解该汇编.我已经读过，无论是在服务器端还是在客户端，AOT和JIT都将TypeScript编译为JavaScript.如果我在用Webpack和grunt构建它并部署该缩小的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:

• 查看编译器
• 提供者编译器

• view compiler
• provider compiler

视图编译器将编译组件模板，并且生成视图工厂.它解析模板中的表达式和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屋！