Angular 2 Bootstrapping Options - AOT vs JIT

时间:2016-12-08 23:00:37

标签: angular jit angular2-aot angular2-bootstrapping

刚开始使用Angular 2.

  1. 角度2中的各种Bootstrapping选项有哪些?

  2. 为什么当我进行更改并刷新index.html时,只需要很少的时间来检索HTML标记?

  3. 他们之间的差异

2 个答案:

答案 0 :(得分:8)

有两个选项

  1. 动态自举

    • 编译器使用 JIT (及时)。
    • 在浏览器中动态编译ts文件。
    • 这就是index.html花费很少时间来检索标记的原因。
    • main.ts包含以下内容

      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
      import { AppModule }              from './app.module';
      
      platformBrowserDynamic().bootstrapModule(AppModule);
      
      1. 静态自举
    • 编译器使用 AoT (提前)。
    • ts文件被编译成js文件,然后呈现给浏览器。
    • 通过这种方式,一组包含模块和工厂的js文件在那里创建,使它们重量轻。
    • 主要用于移动设备和传统网络。
    • main.ts包含以下内容

      import { platformBrowser } from '@angular/platform-browser';
      import { AppModuleNgFactory }              from '../aot/app/app.module.ngfactory';
      
      platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
      
  2. 的差异 enter image description here

答案 1 :(得分:2)

In Angular there are two ways of compilation

  • JIT - Just-in-Time Compilation AOT
  • Ahead-of-Time Compilation

I would like to add four major differences when it comes to JIT vs AOT compilation

|----------------------------------------|---------------------------------------------|
|                    JIT                 |                   AOT                       |
|----------------------------------------|---------------------------------------------|
| JIT compilation as the name implies,   | AOT compilation compiles the application at |
| compiles  the application Just in Time | build time                                  |
| in the browser at runtime              |                                     |
|----------------------------------------|---------------------------------------------|
|For JIT compilation the browser needs to| AOT compilation it does not have to         |
|download the angular compiler           |                                             |
|----------------------------------------|---------------------------------------------|
|While the application is being JIT      | With AOT, the application is precompiled    | 
|compiled in the browser, users have     | so there no such wait                       |
|to wait                                 |                                             |
|----------------------------------------|---------------------------------------------|
|With JIT compilation, the template      | With AOT compilation we will come to        |
|binding errors are only know at runtime | now about them at build time.               |
|----------------------------------------|---------------------------------------------|   

By default, the following2 commands use JIT compilation

ng build
ng serve

With either of these command we can use - -aot option to turn on AOT

ng build --aot
ngserve --aot

To turn off ACT for the production build, set - - aot option to false

 ng build -- prod --aot false