Question

我正在潜入角度4，我正在努力理解编译。我已经读过AOT和JIT都将TypeScript编译为JavaScript，无论是服务器端还是客户端。如果我在使用Webpack和grunt构建它时编译它并部署那个缩小的javascript，AOT和JIT是如何进入图片的？

Answer 1

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

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

Angular编译器

有两个编译器可以完成编译和代码生成的艰苦工作：

视图编译器编译组件模板和generates view factories。它解析模板中的表达式和html元素，并经历了许多标准编译器阶段：

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

提供程序编译器编译模块提供程序和generates module factories。

JIT vs AOT

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

// the view compiler needs this data

@Component({
   providers: ...
   template: ...
})

// the provider compiler needs this data

@NgModule({
   providers: ...
});

JIT编译器使用运行时来获取数据。执行装饰器函数@Component和@NgModule并they attach metadata到组件或模块类，稍后由Angular编译器使用反射功能（反射库）读取。

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

// this module scoped function

function declarations() {
  return [
    SomeComponent
  ]
}

// should be exported

export function declarations() {
  return [
    SomeComponent
  ];
}
@NgModule({
  declarations: declarations(),
})
export class SomeModule {}

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

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

Angular提供webpack plugin，在构建期间从typescript执行转换。这个插件也可以AOT编译你的项目，这样你就不会将JIT编译器包含在bundle中，也不会在客户端上执行编译。

Answer 2

首先，角度正在远离JIT编译。我希望我们会在angular@5.x.x

中看到它

Angular编译器通过使用装饰器（如

）获取您编写的所有元数据

@Component({
  selector: 'my-app',
  template: '<h1>Hello</h1>'m
  styles: [ ':host { display: block }' ]
})

constructor(
  @Host() @Optional() private parent: Parent,
  @Attribute('name') name: string) {} 

@ViewChild('ref') ref;

@ContentChildren(MyDir) children: QueryList<MyDir>;  

@HostBinding('title') title;

@HostListener('click') onClick() { ... }

// and so on

并分析它。然后它需要模板和样式表并解析它。编译器经历了我在这里没有描述的许多步骤。您可以查看描述编译过程的the following page。 Tobias Bosch也有great talk。最后，编译器创建了ngfactories来实例化我们的应用程序。

我认为JIT中AOT的主要区别是

角度运行汇编的时间和地点
编译器如何收集元数据
编译器生成的ngfactory的格式是什么

JIT编译器

在每次加载页面时在我们的浏览器中运行客户端。

它使用@angular/core包中的ReflectionCapabilities API收集元数据。我们有以下选项在JIT模式下使用元数据：

1）直接API

例如，我们可以声明我们的组件

export class AppComponent {
  static annotations = [
    new Component({
      selector: 'my-app',
      templateUrl: `./app.component.html`,
      styles: [ ':host { display: block }' ]
    })
  ];

  test: string;

  static propMetadata = {
      test: [new HostBinding('title')]
  };


  ngOnInit() {
    this.test = 'Some title'
  }
}

我们可以在ES5中编写类似的代码。 JIT编译器将读取annotations和propMetadata静态属性。 AOT编译器无法使用它。

2）tsickle API

export class AppComponent {
  static decorators = [{
      type: Component,
      args: [{
        selector: 'my-app',
        templateUrl: `./app.component.html`,
        styles: [ ':host { display: block }' ]
      },]
  }];

  test: string;

  static propDecorators = {
    'test': [{ type: HostBinding, args: ['title'] }]
  };

  ngOnInit() {
    this.test = 'Some title'
  }
}

上面的代码通常由某个库生成。 Angular包也具有相同的格式。这也无法与aot合作。我们必须将metadata.json文件与我们的库一起发送以进行AOT编译。

3）通过调用装饰器获取元数据

@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`
})
export class AppComponent {
  @HostBinding('title') test = 'Some title';
}

Typescript编译器将前面的代码转换为

 var AppComponent = (function () {
    function AppComponent() {
        this.test = 'Some title';
    }
    return AppComponent;
}());
__decorate([
    HostBinding('title')
], AppComponent.prototype, "test", void 0);
AppComponent = __decorate([
    Component({
        selector: 'my-app',
        templateUrl: "./app.component.html"
    })
], AppComponent);

此代码在JIT模式下执行，因此有角度calls Component decorator

const TypeDecorator: TypeDecorator = <TypeDecorator>function TypeDecorator(cls: Type<any>) {
      // Use of Object.defineProperty is important since it creates non-enumerable property which
      // prevents the property is copied during subclassing.
      const annotations = cls.hasOwnProperty(ANNOTATIONS) ?
          (cls as any)[ANNOTATIONS] :
          Object.defineProperty(cls, ANNOTATIONS, {value: []})[ANNOTATIONS];
      annotations.push(annotationInstance);
      return cls;
};

今天它doesn't use Reflect api anymore。编译器直接从__annotations__属性

读取数据

if (typeOrFunc.hasOwnProperty(ANNOTATIONS)) {
  return (typeOrFunc as any)[ANNOTATIONS];
}

JIT编译器生成javascript ngfactories

AOT编译器

在构建时使用ngc 在服务器端（nodejs）上运行。

使用AOT，没有运行时编译步骤。当我们在浏览器中运行我们的应用程序时，我们已经预编译了ngfactories。它首先为我们提供了更好的性能和延迟负载。我们也不再在我们的生产包中发送@angular/compiler代码。但是由于我们的ngfactories代码，我们的捆绑包会显着增长。

AOT编译器使用typescript api来分析打字稿代码。要获取元数据编译器，请通过StaticSymbolResolver和MetadataCollector API。

因此需要app.component.ts文件并创建打字稿对象模型。因此，我们的AppComponent课程将显示为NodeObject类型229（ClassDeclaration）

我们可以看到此对象具有decorators属性

和由angular团队编写的特殊打字稿包装，并调用tsc-wrapper does hard work来提取此元数据。

当编译器meets d.ts file尝试从metadata.json获取元数据时：

if (DTS.test(filePath)) {
  var metadataPath = filePath.replace(DTS, '.metadata.json');
  if (this.context.fileExists(metadataPath)) {
    return this.readMetadata(metadataPath, filePath);
  }
  else {
    // If there is a .d.ts file but no metadata file we need to produce a
    // v3 metadata from the .d.ts file as v3 includes the exports we need
    // to resolve symbols.
    return [this.upgradeVersion1Metadata({ '__symbolic': 'module', 'version': 1, 'metadata': {} }, filePath)];
  }
}

最后AOT编译器使用TypeScriptEmitter来生成打字稿ngfactories （angular＆lt; 4.4.0）

另见

How aot works

Answer 3

浏览器加载应用程序包后，Angular编译器（在vendor.bundle.js中打包）执行main.bundle.js模板的编译。这称为即时编译。这个术语意味着编译发生在捆绑包到达浏览器的时候。

JIT编译的缺点是：

加载包和呈现UI之间存在时间差。这段时间用于JiT编译。在一个小应用程序上这次是最小的，但在较大的应用程序中，JiT编译可能需要几秒钟，因此用户需要等待更长时间才能看到您的应用程序。
Angular编译器必须包含在vendor.bundle.js中，这会增加应用程序的大小。

不建议在prod中使用JiT编译，我们希望在创建包之前将模板预编译为JavaScript。这就是Ahead-of-Time（AoT）编译的内容。

AoT编译的优点是：

浏览器可以在加载应用后立即呈现UI。无需等待代码编译。
ngc编译器不包含在vendor.bundle.js中，并且应用程序的结果大小可能会更小。

如果您正在使用Webpack，要执行AoT，您需要调用ngc编译器。例如：

"build:aot": "ngc -p tsconfig.json && webpack --config webpack.config.js"

Angular AOT和JIT编译器有什么区别

3 个答案:

Angular编译器

JIT vs AOT

JIT编译器

AOT编译器