Angular 컴파일 개념 (AOT vs JIT)

 

 

 

규모가 큰 프로젝트를 처음 접근하면서 ng serve를 하면 어떨때에는 빠르고 어떨때에는 느리게 생기는 이유가 뭘까 하며 생각하다가 공부하게된것인데 Angular에서는 다양한 상황에 따른 컴파일 설정을 바꿀수 있었다. 그러기위해 Angular.io를 뒤져보며 찾은것을 적어보겠습니다.

 

 

💡 Angular에는 컴파일 종류가 2가지로 JIT(Just in Time)과 AOT(Ahead of Time)가 있는데 JIT은 런타임 컴파일을, AOT는 미리 컴파일을한다.

 

 

 

JIT 컴파일

---

 

💡 JIT은 실제 애플리케이션이 브라우저에서 실행되는 순간에 코드에 대해 컴파일을 진행한다

• 사용자가 브라우저에 접속하게되면 모든 소스코드를 서버에서 로드해오면서 실행되기 직전에 컴파일을 진행한다.

 

• 실행 직전에 컴파일을 하기때문에 에러를 미리 발견하지는 못하여서 애플리케이션을 사용하지 못한다.

 

• 소스코드 자체에 컴파일러가 포함되어서 오기 때문에 용량은 크고 실행되기 전에 컴파일을 진행하기 때문에 사용자들 입장에서는 조금 더 답답할 수 있다.

 

(운영용으로 사용 X)

 

 

 

 

AOT 컴파일

---

 

💡 AOT 컴파일러는 Angular HTML 템플릿과 TypeScript 코드를 빌드 단계에서 JavaScript 코드로 변환하며, 이렇게 변환된 코드는 브라우저가 다운로드해서 실행합니다.

• 사용자가 브라우저에 접속하면 컴파일러는 제외한 소스코드를 불러온다

 

• 로드된 소스코드는 추가 컴파일 작업이 없기때문에 용량과함께 사용자가 기다려야 하는 시간이 거의 없다

 

 

 

 

오류잡을때는 JIT쓰고 AOT는 끄면되겠고 배포할때는 JIT끄고 AOT 키면될것같네요!