Why Angular can be compiled in two ways: JIT and AOT

Why did Angular design two compilation methods for JIT/AOT? Why do you provide @ angular/platform-browser and @ angular/platform-browser-dynamic packages?

as we know, Angular provides @ angular/compiler and @ angular/compiler-cli compiler packages. JIT (just in time) downloads compiler to the browser, where the Angular components and modules, in the ts file are compiled into js files in real time at run time, while AOT (ahead of time) compiles the Angular components and modules, in the ts file into js files using compiler in the build phase. According to this article on Medium, Angular: Is AOT Worth It? , Angular initially had only JIT,. Then Tobias Bosch and Misko Hevery thought of using @ angular/compiler and @ angular/compiler-cli to compile Angular components and modules code during the compilation phase, resulting in AOT compilation. So knowing that JIT/AOT differs only in the compilation phase, you use the same @ angular/compiler and @ angular/compiler-cli compilers to compile the code.

the official website also focuses on ide/aot-compiler" rel=" nofollow noreferrer "> AOT compile , and explains the benefits of AOT and how the Angular compiler package compiles the code. When we developers use Angular, we developers will also use the @ angular/cli tool to compile code using AOT (now @ angular/cli also uses AOT), by default). Although we also know that @ angular/cli also uses @ ngtools/webpack package ngcLoader and AngularCompilerPlugin as custom Webpack Loader and Plugin access to Webpack , Achieve the purpose of loading and compiling Angular components and modules.

so why doesn"t Angular discard JIT and just use AOT? can"t this simplify Angular?

it is precisely because Angular has two ways: JIT and AOT. So two packages are provided for the browser platform: @ angular/platform-browser-dynamic and @ angular/platform-browser . Imagine that if you had only AOT, you would only need one package, which would simplify Angular very much.

in practice, I think most projects will choose AOT instead of JIT.
so why doesn"t Angular discard JIT and just use AOT? doesn"t that simplify Angular?
so why doesn"t Angular discard JIT and just use AOT? can"t it simplify Angular?
so why doesn"t Angular discard JIT and just use AOT? can"t it simplify Angular?

Javascript typescript angular
Aug.04,2021

concludes that JIT is used for development and AOT for deployment.
the direct reason is that the code will be frequently changed during development to trigger compilation frequently. If you use AOT, it will take much more compilation time than JIT, and only enjoy a small (or significant) improvement in interactive response speed after compilation. The interface refresh triggered by each code change will take a long period of pre-compilation time. Taken together, JIT is obviously more suitable for development than AOT (at least in terms of development speed).
production environment (that is, deployment time), obviously there is no need to debug the code frequently at this time, which can spend more compilation time at one time and allow users to enjoy faster execution speed.

when writing a package, I'll give you an example. When writing a custom package, you always need to inject custom configuration into your module, for example, server url. When it comes to a polymorphic environment, you will want to judge the environment at run time to execute code in different environments.
the following is a pure static module, JIT AOT. There is nothing wrong with it.

clipboard.png
,AOT prod
clipboard.png
[picture upload.]

Previous: How can multi-level page tables save memory?

Next: Three.js

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu