Angular 2+ Build 시 종류 (AOT, JIT) 알아보기

Angular 2+ 프로젝트를 3개 이상 진행해보면서 수백번 빌드하여 배포를 했었다.

기본적인 빌드 방법 및 지식은 알고 있었지만 조금 더 파해쳐보고 싶어 다시 한번 머리속으로 정리할겸 포스팅을 시작한다.

Angular 에서 빌드 시 JIT, AOT로 빌드를 할 수 있다. 

기본 세팅으로는 Angular CLI로 빌드 시 JIT 방식으로 빌드를 한다. 하지만 수많은 사람들이 JIT 방식보다는 AOT 방식을 많이 선호하고 사용한다.

그 이유에 대해서 알아보자.

JIT (Just In Time) 란 ?

프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일하는 방식

-> 브라우저에 필요한 바이너리를 스스로 이해하지 못하기 때문에 브라우저가 필요하고 필요함에 있어서 JavaScript 파일을 로드하면 해당 바이너리로 컴파일되어 브라우저에서 해석하고 실행함

Angular Documentation에서는 "앱이 브라우저에서 실행 후 런타임 안에서 컴파일 시작" 이라고 설명한다.

* 런타임이란 ? 프로그램이 실행되고 있을 때 존재하는 곳

AOT (Ahead Of Time) 란 ?

목표 시스템의 기계어와 무관하게 중간 언어 형태로 배포된 후 목표 시스템에서 인터프리터 및 JIT 컴파일 등 기계어 번역을 통해 실행되는 중간 언어를 미리 시스템에 맞는 기계어로 번역하는 방식

-> JIT랑 코드가 컴파일 될 때를 제외한 나머지는 같음

Angular Documentation에서는 "앱을 빌드할 때 컴파일 시작" 이라고 설명한다.

JIT(Just In Time)와 AOT(Ahead Of Time)의 개념은 위와 같다.

그런데 왜 Angular에서는 두 가지 방식 중 AOT 방식을 선호할까 ?

Angular에서는 아래와 같이 설명을 한다.

1. 빠른 렌더링

AOT를 사용하면 브라우저가 사전 컴파일 된 응용 프로그램 버전을 다운로드하며 실행 가능한 코드를 로드 하므로 컴파일 할 때까지 기다리지 않고 즉시 렌더링이 가능

2. 비동기 요청 감소

컴파일러는 어플리케이션 JavaScript 내에서 외부 HTML 및 CSS를 인라인 하여 해당 소스 파일에 대한 별도의 ajax 요청을 제거

3. Framework 다운로드 크기가 감소

앱이 이미 컴파일을 해서 나와 컴파일러를 생략하기 때문에 Payload가 크게 감소

4. 템플릿 오류를 더 빨리 감지

사용자가 직접 빌드 단계에서 템플릿 바인딩 오류를 감지하고 확인 가능

5. 보안 강화

AOT는 HTML 구성 요소를 클라이언트에 제공 되기 전 JavaScript 파일로 컴파일한다. 그러므로 템플릿을 읽을 필요가 없기 때문에 클라이언트 측 주입식 공격 하기가 어려움

위의 내용을 머리속으로 정리하여 개념적으로 접근을 해보자 !

 Angular 2+ 부터는 TypeScript를 사용한다. 하지만 대부분의 TypeScript는 브라우저에서 지원을 하지 않기 때문에 TypeScript compiler 도구를 사용해서 컴파일 후 브라우저에서 사용이 가능하다. 만약 JIT로 build 시 코드가 브라우저에서 로드 된 후 런타임 상태에서 TS -> JS -> binary 방식으로 컴파일된다. 결국 두번 컴파일을 실행한다. 그에 반면 AOT build를 할 시 이미 build할 때 컴파일 되어 나오기 때문에 payload가 감소하며 빠른 렌더링이 가능하다는 결론이 나온다.

감사합니다.

오늘도 해피 코딩하세요 !