I am more Java guy and quite new to web development. I had to go through a bundle of articles to understand what's JIT & AOT mean for web development. Without using fiery Jargons, I will share my understanding in more layman's terms.
Before comparing JIT & AOT compilers, lets start with basics of what it takes to bring up a webpage in browsers.
Angular offers two ways to compile your application:
Just-in-Time (JIT), which compiles your app in the browser at runtime. This was the default until Angular 8.
Ahead-of-Time (AOT), which compiles your app and libraries at build time. This is the default since Angular 9.
Here is what happens before the JS code is renderred to browser.
- Develop Angular app using Typescript+HTML+CSS
The vendor.bundle.js will be HUGE in size. This file contains any libraries imported into your app (app.module), including the Angular libraries.
So the Angular build has angular libraries(compiler) which are needed to compile Angular in browser at runtime.
Here the step 1 remains same.
At Step 2 , execute ng build --prod
This will generate same set of JS bundles, but the size of vendor.bundle.js reduces significantly.
AoT runs the compile step during the build process instead of inside the browser, so when you build your project for production, the compiler (angular) disappear completely from the output.