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,
Respostas:
JIT - Compile o TypeScript bem a tempo de executá-lo.
AOT - Compila o TypeScript durante a fase de construçã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.
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.
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:
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 .