Angular - 컴파일러 JIT, AOT 와 IVY

결론부터 얘기하자면, AOT 와 IVY 를 함께 사용하는 것이 좋다.

이미지 출처: 공식문서.

JIT 와 AOT는 위와 같은 특징을 가지며, AOT는 JIT 에 비해 여러 장점을 가진다.

• 렌더링 시간 단축
• 프레임워크의 크기(용량) 감소
• 템플릿 에러 사전 검증
• 보안성 향상

JIT vs AOT
AOT 승.

---

 

angular ivy

IVY : Angular의 차세대 컴파일 파이프라인이자 렌더링 파이프라인을 의미하는 코드명.

내용을 조금 과하게 축약할 예정이니, 관심이 있다면 아래 링크의 글을 읽거나 따로 검색을 해보시는걸 추천드린다.

 

React에서 채택한 가상돔(Virtual DOM) 에 대응해서 Angular는 증가형돔(Incremental DOM) 을 채택하였다.

증가형돔은 모든 컴포넌트를 명령(instrucdtion)으로 컴파일하기 때문에, 변경사항이 생길 때마다 DOM 트리 구조를 매번 갱신하는 가상돔보다 유리하기 때문이다.
  => 어플리케이션 번들의 용량과 메모리 점유율의 하락을 기대할 수 있다는 점에서 유리.

 

---

아래 링크 중 Slacking studio 블로그를 꼭 읽어보길 권한다.

https://angular.kr/guide/aot-compiler

https://angular.kr/guide/ivy

https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

Understanding Angular Ivy: Incremental DOM and Virtual DOM

https://blog.eunsatio.io/develop/Angular-Ivy-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0:-%EC%A6%9D%EA%B0%80%ED%98%95-%EB%8F%94%EA%B3%BC-%EA%B0%80%EC%83%81%ED%98%95-%EB%8F%94

Slacking studio x BLOG

https://medium.com/angular-in-depth/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf

All you need to know about Ivy, The new Angular engine!

https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/

What is Angular Ivy?

https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7

A plan for version 8.0 and Ivy

https://blog.eunsatio.io/develop/Angular-Ivy-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0:-%EC%A6%9D%EA%B0%80%ED%98%95-%EB%8F%94%EA%B3%BC-%EA%B0%80%EC%83%81%ED%98%95-%EB%8F%94