Je plonge dans angular 4 et j'essaye de comprendre la compilation. J'ai lu qu'AOT et JIT compilaient tous les deux TypeScript en JavaScript, que ce soit côté serveur ou côté client. Si je le compile lorsque je le construis avec Webpack et que je grogne et que je déploie ce javascript minifié, comment AOT et JIT entrent-ils dans l'image?

14
CW1 16 août 2017 à 03:37

2 réponses

Meilleure réponse

J'ai lu qu'AOT et JIT compilaient tous les deux TypeScript en JavaScript, que ce soit côté serveur ou côté client.

Non, ce n'est pas ce que font les compilateurs AOT et JIT. TypeScript est transpilé en JavaScript à l'aide du compilateur typescript.

Compilateur angulaire

Il existe deux compilateurs qui font le dur travail de compilation et de génération de code:

Le compilateur de vue compile les modèles de composants et génère des vues d'usines. Il analyse les expressions et les éléments html à l'intérieur du modèle et passe par de nombreuses phases du compilateur standard:

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

Le compilateur de fournisseurs compile les fournisseurs de modules et génère des fabriques de modules.

JIT vs AOT

Ces deux compilateurs sont utilisés à la fois dans la compilation JIT et AOT. Les compilations JIT et AOT diffèrent par la manière dont elles obtiennent les métadonnées associées au composant ou au module:

// the view compiler needs this data

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

// the provider compiler needs this data

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

Le compilateur JIT utilise le runtime pour obtenir les données. Les fonctions de décoration @Component et @NgModule sont exécutées et ils attachent des métadonnées au composant ou à la classe de module qui sera lu plus tard par les compilateurs angulaires à l'aide de réflective capabiliteis (bibliothèque Reflect).

Le compilateur AOT utilise l'analyse de code statique fournie par le compilateur typescript pour extraire les métadonnées et ne repose pas sur l'évaluation du code. Par conséquent, il est un peu limité par rapport au compilateur JIT car il ne peut pas évaluer le code in-explicite - par exemple, il nécessite l'exportation d'une fonction:

// this module scoped function

function declarations() {
  return [
    SomeComponent
  ]
}

// should be exported

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

Encore une fois, les compilateurs JIT et AOT sont principalement des wrappers pour extraire les métadonnées associées à un composant ou un module et ils utilisent tous les deux la vue sous-jacente et le compilateur fournisseur pour générer des usines.

Si je le compile lorsque je le construis avec Webpack et que je grogne et que je déploie ce javascript minifié, comment AOT et JIT entrent-ils en jeu?

Angular fournit un plug-in webpack qui effectue la transpilation à partir du typographie pendant la construction. Ce plugin peut également compiler AOT votre projet afin que vous n'incluiez pas le compilateur JIT dans le bundle et n'effectuiez pas de compilation sur le client.

23
Max Koretskyi 17 août 2017 à 06:08

Une fois que le navigateur a chargé vos bundles d'applications, le compilateur Angular (emballé dans vendor.bundle.js) effectue la compilation des modèles à partir de main.bundle.js. C'est ce qu'on appelle la compilation Just-in-Time. Ce terme signifie que la compilation a lieu au moment de l'arrivée des bundles dans le navigateur.

Les inconvénients de la compilation JIT sont:

  1. Il y a un intervalle de temps entre le chargement des bundles et le rendu de l'interface utilisateur. Ce temps est consacré à la compilation JiT. Sur une petite application, ce temps est minime, mais dans les applications plus grandes, la compilation JiT peut prendre quelques secondes, de sorte que l'utilisateur doit attendre plus longtemps pour simplement voir votre application.

  2. Le compilateur Angular doit être inclus dans le vendor.bundle.js, ce qui ajoute à la taille de votre application.

L'utilisation de la compilation JiT dans la production est déconseillée et nous voulons que les modèles soient précompilés en JavaScript avant la création des bundles. C'est ce qu'est la compilation Ahead-of-Time (AoT).

Les avantages de la compilation AoT sont:

  1. Le navigateur peut afficher l'interface utilisateur dès que votre application est chargée. Il n'est pas nécessaire d'attendre la compilation du code.

  2. Le compilateur ngc n'est pas inclus dans vendor.bundle.js et la taille résultante de votre application peut être plus petite.

Si vous utilisez Webpack, pour faire AoT, vous devez appeler le compilateur ngc. Par exemple:

"build:aot": "ngc -p tsconfig.json && webpack --config webpack.config.js"
4
Yakov Fain 16 août 2017 à 01:40