JIT vs AOT 컴파일러

 

 

 

https://www.youtube.com/watch?v=sJVenujWGjs

 

Overview

 

회사에서 개발하고 있는 Angular Landing 프로젝트에서 Angular 9 버전 업데이트를 하기 위해 Angular 공식문서를 살펴보게 되었습니다. 먼저 Angular 9 버전으로 업데이트를 하게 만든 Localize기능이 추가가 되었고(Localize 기능 업데이트로 인해서 다국어를 지원하는 경우 빌드 시간이 획기적으로 개선되었습니다), IVY 컴파일러로 업데이트 되면서 AOT 컴파일을 디폴트 옵션로 지원한다는 내용이 있었습니다. 웹 프레임워크에서 AOT 컴파일을 지원하게 될 경우에 갖는 장점이 있는데, 이번 포스팅에서는 AOT 컴파일은 무엇을 의미하는지, 그리고 AOT와 항상 같이 비교되는 JIT 컴파일은 무엇을 의미하는지에 대해서 살펴보도록 하겠습니다. (AOT 컴파일에 대한 Angular 공식 문서)

 

 

Whole Process

Angular App이 프레임워크에서 작성되어, 사용자의 브라우저에서 해석되기까지의 간략한 절차를 먼저 소개하려고 합니다. AOT와 JIT컴파일 방식을 제대로 이해하기 위해서는 이 전반적인 과정에 대한 이해가 필요합니다.

 

1. Angular Framework에서 Typescript, Html, CSS(SASS or SCSS)로 소스 코드를 작성합니다. 

2. 프로그램이 작성되고 나면, ng build를 통해서 소스 코드를 관련 있는 것들끼리 묶는 '번들링 작업'을 진행합니다. 이 작업이 끝나면 수많은 Ts, html, css파일들이 assets, js files, js map, vendor, polyfill, index.html, css등으로 묶입니다. 

3. 각자 사용하는 Deploy방법을 통해 빌드된 파일들을 원격지에 배포합니다.

 

4. 사용자가 Domain을 통해서 배포된 원격지에 http요청을 보냅니다. 브라우저는 원격지로부터 html, css, js, assets들을 다운로드합니다.

5. 다운로드가 완료되면 Angular가 App을 실행합니다. (bootstrap)

6. 바로 이 지점에서 AOT와 JIT가 차이를 보입니다. AOT는 바로 화면을 렌더할 수 있고, JIT는 다운로드된 파일들을 한번 더 컴파일하여 화면을 렌더합니다.

7. 사용자에게 화면이 렌더가 완료되어 상호작용할 수 있는 상태가 됩니다.

 

 

 

Ahead-Of-Time Compilation (AOT)

 

AOT는 Ahead-Of-Time Compilation의 약자로 말 그래도 소스 코드를 '미리' 컴파일하는 방식을 의미합니다. ng build를 통해 번들링 작업을 실행하지만, 브라우저가 번들링 된 코드를 바로 실행할 수 있는 것은 아닙니다. 브라우저가 어떤 엔진을 사용하는지에 따라 브라우저는 각각의 js파일들을 머신 코드등의 저수준 코드로(Low Level code)로 다시 컴파일 한 후에 실행합니다. 

 

 

AOT방식은 이를 빌드 타임에 컴파일해주기 때문에 브라우저가 Angular App을 저수준 코드로 다시 컴파일 할 필요 없이 바로 실행할 수 있습니다. 기존의 방식에서 컴파일에 소요되는 시간이 빠지기 때문에 더 빠른 렌더가 가능하다는 것이 장점입니다. 또한 서버에서 이미 컴파일된 파일을 제공하므로 클라이언트에서 http 요청을 보냈을 때 컴파일러를 보낼 필요가 없습니다. 다시말해서 vendor.bundle.js 파일에서 컴파일러를 제외하므로 번들 사이즈가 많이 작아지게 됩니다. (일반적으로 앵귤러 컴파일러는 용량이 상대적으로 큽니다.)

 

 

그 외에 템플릿 바인딩 에러등을 빌드 타임에 미리 잡을 수 있다는 점등이 있기 때문에 AOT방식은 실제 프로덕션 과정에서 자주 사용되는 방식입니다. 

 

 

Just-In-Time Compilation (JIT)

 

JIT방식은 앞선 AOT방식과 반대되는 성향을 가진다고 생각할 수 있습니다. 말 그대로 브라우저에서 파일들을 다운로드 한 뒤에 한번 컴파일해서 브라우저 엔진이 실행할 수 있는 저수준 언어로 바꾸어준 후에, 화면을 렌더하는 방식입니다.

 

소스코드가 서버에서 컴파일되는 것이 아니라 사용자의 브라우저에서 컴파일되는 방식이기 떄문에 기본적으로 AOT방식에 비해서 컴파일하는데에 어느 정도의 시간이 소요됩니다. 마찬가지의 이유로 컴파일 에러도 사용자의 브라우저에서 나타나기 때문에 사용자의 브라우저에서 갑자기 앱이 멈춘다거나 에러가 생기는 일이 발생할 수 있습니다.

 

컴파일러를 사용자의 브라우저로 전송해야 컴파일이 가능하기 때문에 AOT에 비해서 번들 사이즈가 크다는 특징도 가지고 있습니다. 하지만 브라우저에서 여러 에러들을 발생시키고, 확인할 수 있다는 점 때문에 로컬에서 테스트를 진행한다거나 할때 JIT컴파일 방식을 사용하기도 합니다. 브라우저에서 디버깅이 가능하다는 것은 로컬 개발시에는 분명한 장점이기 때문입니다.

 

 

Conclusion

규모가 상당히 큰 Angular8프로젝트를 Angular9버전으로 대대적인 업데이트를 진행하면서 느꼈던 점은 이번 Angular9 업데이트에서 가장 신경을 쓴 부분 중의 하나가 '빌드 속도'가 아닐까 하는 것이었습니다. Localize를 통해서 다국어 빌드시간을 획기적으로 단축시켰고, IVY Compiler업데이트를 통해 기본적인 빌드 속도도 확실히 빨라진 것을 느낄 수 있었습니다. AOT를 디폴트 옵션으로 지정한 것도 이런 의미에서가 아닐까 싶습니다.