Compilação Just-in-Time (JiT) vs Ahead-of-Time (AoT) no Angular

Eu estava me referindo esta documentação e me deparei com o conceito de compilação. Pode-se usar a compilação JIT ou AOT. No entanto, achei muito breve e preciso saber os seguintes pontos em detalhes,

• Diferenças entre essas duas técnicas
• Recomendação sobre quando usar o quê

JIT - Compile o TypeScript bem a tempo de executá-lo.

• Compilado no navegador.
• Cada arquivo compilado separadamente.
• Não há necessidade de construir depois de alterar seu código e antes de recarregar a página do navegador.
• Adequado para desenvolvimento local.

AOT - Compila o TypeScript durante a fase de construção.

• Compilado pela própria máquina, via linha de comando (Faster).
• Todo o código compilado junto, inlining HTML / CSS nos scripts.
• Não há necessidade de implantar o compilador (metade do tamanho Angular).
• Mais seguro, fonte original não divulgada.
• Adequado para montagens de produção.

Embora existam algumas respostas, eu gostaria de adicionar algumas das minhas descobertas também, porque eu estava realmente confuso com o que realmente está sendo compilado, pois em todos os casos, TS-> a JSconversão acontece. Estou pegando alguns parágrafos do blog do Jeff como referência.

JIT

O TScódigo escrito pelo desenvolvedor é compilado em JScódigo. Agora, este jscódigo compilado é compilado pelo navegador novamente para que htmlpossa ser renderizado dinamicamente de acordo com a ação do usuário e, consequentemente, os códigos para angular (para componentes, detecção de mudança, injeção de dependência) também são gerados em tempo de execução.

(O compilador de navegador é o que pega as diretivas e componentes de um aplicativo, junto com seus HTML e CSS correspondentes, e cria fábricas de componentes para eliminar rapidamente as instâncias com toda a lógica de criação de visualização.)

Quando um aplicativo Angular 2 é inicializado no navegador, o compilador JIT executa muito trabalho para analisar os componentes do aplicativo em tempo de execução e gerar código na memória. Quando a página é atualizada, todo o trabalho que foi feito é jogado fora, e o compilador JIT faz o trabalho novamente.

AOT

O TScódigo escrito pelo desenvolvedor é compilado para JScódigo, este js já foi compilado para o angular também . Agora, este código compilado js é compilado pelo navegador novamente para que htmlpossa ser renderizado. Mas, o problema aqui é que os recursos do angularjá foram tratados pelo AOTcompilador e, portanto, o navegador não precisa se preocupar muito com a criação de componentes, detecção de alterações e injeção de dependência. Então nós temos :

Renderização mais rápida

Com AOT, o navegador baixa uma versão pré-compilada do aplicativo. O navegador carrega o código executável para que possa renderizar o aplicativo imediatamente, sem esperar para compilar o aplicativo primeiro.

Menos solicitações assíncronas

O compilador inline templates HTML externos e folhas de estilo CSS dentro do aplicativo JavaScript, eliminando solicitações separadas de ajax para esses arquivos de origem.

Tamanho menor de download da estrutura Angular

Não há necessidade de baixar o compilador Angular se o aplicativo já estiver compilado. O compilador é quase a metade do próprio Angular, portanto, omiti-lo reduz drasticamente a carga útil do aplicativo.

Detecte erros de modelo mais cedo

O compilador AOT detecta e relata erros de vinculação de modelo durante a etapa de construção antes que os usuários possam vê-los.

Melhor segurança

AOT compila modelos e componentes HTML em arquivos JavaScript muito antes de serem entregues ao cliente. Sem modelos para ler e sem avaliação arriscada de HTML ou JavaScript do lado do cliente, há menos oportunidades para ataques de injeção.

As diferenças restantes já foram abordadas nos tópicos de Benyamin, Nisar e Gaurang.

Sinta-se à vontade para me corrigir

Benyamin e Nisar mencionaram alguns pontos positivos aqui. Eu vou adicionar a isso.

Embora teoricamente, AOT pareça uma opção atraente do que JIT para fins de produção, mas eu tinha minhas dúvidas se AOT realmente vale a pena!

Bem, eu encontrei boas estatísticas de Jeff Cross e isso prova que AOT reduz significativamente o tempo de inicialização do aplicativo. Abaixo, o instantâneo da postagem de Jeff Cross lhe dará uma ideia rápida sobre isso,

Compilação JiT (Just in Time)

O próprio nome descreve o funcionamento, ele compila o código apenas na hora de carregar a página no navegador. O navegador fará o download do compilador e construirá o código do aplicativo e o renderizará.

Será bom para o ambiente de desenvolvimento.

Compilação AoT (Ahead of Time)

Ele compila todo o código no momento da construção do aplicativo. Portanto, o navegador não deseja baixar o compilador e compilar o código. Neste método, o navegador pode facilmente renderizar o aplicativo apenas carregando o código já compilado.

Pode ser usado no ambiente de produção

Podemos comparar a compilação JiT e AoT conforme abaixo

JIT (Compilação Just-in-Time)

Just-in-Time (JIT) é um tipo de compilação que compila seu aplicativo no navegador em tempo de execução.

ng build
ng serve

AOT (Compilação Ahead-of-Time)

Ahead-of-Time (AOT) é um tipo de compilação que compila seu aplicativo no momento da construção.

ng build --aot
ng serve --aot

No final do dia, AOT (Ahead-of-Time) e JIT (Just-in-Time) fazem as mesmas coisas. Ambos compilam seu código Angular para que ele possa ser executado em um ambiente nativo (também conhecido como navegador). A principal diferença é quando a compilação acontece. Com AOT, seu código é compilado antes do download do aplicativo no navegador. Com o JIT, seu código é compilado em tempo de execução no navegador.

Aqui está a comparação:

Benefícios do AOT:

• Inicialização mais rápida, pois a análise e a compilação não acontecem no navegador.
• Os modelos são verificados durante o desenvolvimento (o que significa que todos os erros que vemos no console javascript nos aplicativos em execução serão lançados em nosso processo de construção).
• Tamanho de arquivo menor, pois os recursos não utilizados podem ser eliminados e o compilador em si não é enviado.

Na verdade, existe apenas um compilador Angular. A diferença entre AOT e JIT é uma questão de tempo e ferramentas. Com AOT, o compilador é executado uma vez no momento da construção usando um conjunto de bibliotecas; com o JIT, ele é executado sempre para cada usuário em tempo de execução, usando um conjunto diferente de bibliotecas.

Compilador JIT que usamos durante o desenvolvimento do projeto angular. Nesta compilação (conversão de TS para JS) acontece durante o tempo de execução da aplicação. Enquanto AOT é usado durante a construção do código do aplicativo para a implantação do aplicativo em produção, dessa vez construímos nosso código do aplicativo usando o comando ng build --prod que gera uma pasta chamada webpack, webpack contém o pacote de todos os arquivos (HTML , CSS e typescript) em formato javascript compactado.

O tamanho da pasta webpack gerada para a produção é bem menor do que a pasta gerada para o ambiente de desenvolvimento (usando o comando ... ng build), pois não contém o compilador dentro da pasta webpack, melhora o desempenho da aplicação .