Desde a versão 1 do Angular, ele trabalha com um compilador inteligente conhecido como JIT (Just in Time). Ele compila o nosso código em tempo de execução. Até a versão 2, esse era o compilador que nós estávamos utilizando nas nossas builds. Em um dos updates da versão 4, os desenvolvedores do core do Angular pensaram em uma nova forma de melhorar esse processo. Ao invés dele ser compilado pelos nossos navegadores em tempo de real, por que não fazer esse processo no momento da build? Pensando nisso, eles desenvolveram uma nova versão chamada AoT (Ahead-of-Time).

Com o AoT, os nossos navegadores carregam os executáveis do nosso código e imediatamente renderizam a nossa aplicação sem precisar esperar a compilação do nosso App First. Com ele, nós conseguimos diminuir o número de requisições assíncronas, ter um código menor e outros benefícios, como um código mais seguro.

Vamos, agora, abrir o código que nós utilizamos em um artigo anterior, para que possamos testar essas duas formas de compilação. Caso você não tenha esse código, segue o seu link do GitHub.

Com o projeto aberto no Visual Studio Code, abra o ser terminal e execute o comando abaixo para que possamos simular a nossa build de com o JIT.

ng serve --prod

Agora, abra uma nova aba no seu Visual Studio Code e execute o comando abaixo para que possamos simular uma nova build com o AoT:

ng serve --prod --aot --p 4126

Notem que para utilizarmos o AoT, basta inseri-lo depois da tag prod. Podemos ver nas imagens abaixo o resultado dos nossos testes:

Exemplo com o JIT

Exemplo com o AoT

Para finalizar esse artigo, segue uma imagem com o gráfico demonstrando o desempenho que nos conseguimos atingir com o AoT.