Angular의 JiT (Just-in-Time) vs AoT (Ahead-of-Time) 컴파일
답변:
JIT-실행을 위해 적시에 TypeScript를 컴파일합니다.
- 브라우저에서 컴파일됩니다.
- 각 파일은 별도로 컴파일됩니다.
- 코드를 변경 한 후 브라우저 페이지를 다시로드하기 전에 빌드 할 필요가 없습니다.
- 지역 개발에 적합합니다.
AOT-빌드 단계에서 TypeScript를 컴파일합니다.
- 시스템 자체에서 명령 줄을 통해 컴파일됩니다 (빠른 속도).
- 모든 코드는 함께 컴파일되어 스크립트에 HTML / CSS를 삽입합니다.
- 컴파일러를 배포 할 필요가 없습니다 (Angular 크기의 절반).
- 더 안전한 원본 소스는 공개되지 않습니다.
- 프로덕션 빌드에 적합합니다.
몇 가지 답변이 있지만 모든 경우와 같이 실제로 컴파일되는 내용과 정말 혼란 스러웠 기 때문에 내 결과 중 일부도 추가하고 싶습니다 .-- TS> JS변환이 발생합니다. 나는 Jeff의 블로그 에서 일부 파라를 참조로 삼고 있습니다 .
JIT
TS개발자가 작성한 코드 는 코드로 컴파일됩니다 JS. 이제이 컴파일 된 js코드는 브라우저에 의해 다시 컴파일되어 html사용자 작업에 따라 동적으로 렌더링 될 수 있으며 이에 따라 angular (구성 요소, 변경 감지, 종속성 주입)에 대한 코드 도 런타임에 생성됩니다.
(브라우저 컴파일러는 해당 HTML 및 CSS와 함께 응용 프로그램의 지시문 및 구성 요소를 가져오고 구성 요소 팩토리를 만들어 모든 뷰 생성 논리로 인스턴스를 빠르게 스탬프 처리합니다.)
Angular 2 애플리케이션이 브라우저에서 부트 스트랩되면 JIT 컴파일러는 런타임에 애플리케이션의 구성 요소를 분석하고 메모리에서 코드를 생성하기 위해 많은 작업을 수행합니다. 페이지가 새로 고쳐지면 수행 된 모든 작업이 폐기되고 JIT 컴파일러가 작업을 다시 수행합니다.
AOT
TS개발자가 작성한 코드로 컴파일 된 JS코드 이것은 js
이미뿐만 아니라 각 컴파일되었습니다 . 이제이 컴파일 된 js 코드는를 html렌더링 할 수 있도록 브라우저에 의해 다시 컴파일 됩니다. 그러나 여기서 문제는의 기능 angular이 이미 AOT컴파일러 에 의해 처리 되었으므로 브라우저는 구성 요소 생성, 변경 감지, 종속성 주입에 대해 크게 걱정할 필요가 없다는 것 입니다. 그래서 우리는 :
더 빠른 렌더링
AOT를 사용하면 브라우저가 미리 컴파일 된 버전의 애플리케이션을 다운로드합니다. 브라우저는 실행 가능한 코드를로드하므로 먼저 앱 컴파일을 기다리지 않고 애플리케이션을 즉시 렌더링 할 수 있습니다.
더 적은 비동기 요청
컴파일러는 애플리케이션 JavaScript 내에서 외부 HTML 템플릿과 CSS 스타일 시트를 인라인하여 해당 소스 파일에 대한 별도의 ajax 요청을 제거합니다.
더 작은 Angular 프레임 워크 다운로드 크기
앱이 이미 컴파일 된 경우 Angular 컴파일러를 다운로드 할 필요가 없습니다. 컴파일러는 Angular 자체의 약 절반이므로 생략하면 애플리케이션 페이로드가 크게 줄어 듭니다.
조기에 템플릿 오류 감지
AOT 컴파일러는 사용자가보기 전에 빌드 단계 중에 템플릿 바인딩 오류를 감지하고보고합니다.
더 나은 보안
AOT는 HTML 템플릿과 구성 요소가 클라이언트에 제공되기 훨씬 전에 JavaScript 파일로 컴파일합니다. 읽을 템플릿과 위험한 클라이언트 측 HTML 또는 JavaScript 평가가 없기 때문에 주입 공격의 기회가 줄어 듭니다.
나머지 차이점은 이미 Benyamin, Nisar & Gaurang의 글 머리 기호에서 다루었습니다.
나를 고쳐주세요
Benyamin과 Nisar는 여기서 몇 가지 좋은 점을 언급했습니다. 추가하겠습니다.
이론적으로 AOT는 프로덕션 목적으로 JIT보다 매력적인 옵션으로 보이지만 AOT가 그만한 가치가 있는지 의문이 들었습니다!
글쎄요, 저는 Jeff Cross의 좋은 통계를 찾았고 AOT가 앱의 부트 스트래핑 시간을 크게 줄였다는 것을 증명했습니다. Jeff Cross의 게시물에서 아래 스냅은 이에 대한 빠른 아이디어를 제공합니다.
JiT (Just in Time) 컴파일
이름 자체가 작동을 설명하고 브라우저에서 페이지를로드 할 때 코드를 컴파일합니다. 브라우저는 컴파일러를 다운로드하고 애플리케이션 코드를 빌드하고 렌더링합니다.
개발 환경에 좋을 것입니다.
AoT (Ahead of Time) 컴파일
응용 프로그램을 빌드 할 때 모든 코드를 컴파일합니다. 따라서 브라우저는 컴파일러를 다운로드하고 코드를 컴파일하는 것을 원하지 않습니다. 이 메서드에서 브라우저는 이미 컴파일 된 코드를로드하여 애플리케이션을 쉽게 렌더링 할 수 있습니다.
생산 환경에서 사용 가능
JiT와 AoT 컴파일을 아래와 같이 비교할 수 있습니다.
JIT (Just-in-Time 컴파일)
JIT (Just-in-Time)는 런타임에 브라우저에서 앱을 컴파일하는 컴파일 유형입니다.
ng build
ng serve
AOT (Ahead-of-Time Compilation)
AOT (Ahead-of-Time)는 빌드시 앱을 컴파일하는 컴파일 유형입니다.
ng build --aot
ng serve --aot
하루가 끝나면 AOT (Ahead-of-Time)와 JIT (Just-in-Time)는 동일한 작업을 수행합니다. 둘 다 Angular 코드를 컴파일하여 네이티브 환경 (일명 브라우저)에서 실행할 수 있습니다. 주요 차이점은 컴파일이 발생하는시기입니다. AOT를 사용하면 브라우저에서 앱을 다운로드하기 전에 코드가 컴파일됩니다. JIT를 사용하면 브라우저에서 런타임에 코드가 컴파일됩니다.
비교는 다음과 같습니다.
AOT의 이점 :
- 브라우저에서 구문 분석 및 컴파일이 발생하지 않으므로 더 빠르게 시작 됩니다.
- 템플릿은 개발 중에 확인 됩니다 (즉, 실행중인 앱의 자바 스크립트 콘솔에 표시되는 모든 오류가 빌드 프로세스에서 발생 함을 의미합니다).
- 사용하지 않는 기능으로 더 작은 파일 크기 는 제거 할 수 있으며 컴파일러 자체는 제공되지 않습니다.
실제로 Angular 컴파일러는 하나뿐입니다. AOT와 JIT의 차이점은 타이밍과 툴링의 문제입니다. AOT를 사용하면 컴파일러가 하나의 라이브러리 세트를 사용하여 빌드시 한 번 실행됩니다. JIT를 사용하면 런타임에 다른 라이브러리 세트를 사용하여 모든 사용자에 대해 매번 실행됩니다.
각도 프로젝트를 개발하는 동안 사용하는 JIT 컴파일러입니다. 이 컴파일 (TS에서 JS 로의 변환)은 애플리케이션의 런타임 중에 발생합니다. 프로덕션에서 애플리케이션 배포를위한 애플리케이션 코드를 빌드하는 동안 AOT가 사용되는 경우, 그 당시 webpack이라는 폴더를 생성하는 ng build --prod 명령을 사용하여 애플리케이션 코드를 빌드하고, webpack에는 모든 파일의 번들이 포함됩니다 (HTML , CSS 및 typescript)를 압축 된 자바 스크립트 형식으로 제공합니다.
프로덕션을 위해 생성되는 webpack 폴더의 크기는 개발 환경 (... ng build 명령 사용)에서 생성 된 폴더보다 훨씬 적습니다. 이는 webpack 폴더 내에 컴파일러가 포함되어 있지 않기 때문에 응용 프로그램의 성능을 향상시킵니다. .