Just-in-Time(JiT) 대 AoT(Aud-of-Time) Angular 컴파일

Just-in-Time(JiT) 대 AoT(Aud-of-Time) Angular 컴파일

이 문서를 참조하다가 컴파일 개념을 발견했습니다.JIT 또는 AOT 컴파일을 사용할 수 있습니다.하지만, 저는 그것이 매우 간단하다는 것을 알았고, 다음 사항들을 자세히 알아야 합니다.

• 두 기술의 차이점
• 사용 시기에 대한 권장 사항

JIT - 실행 시간에 맞춰 TypeScript를 컴파일합니다.

• 브라우저에서 컴파일됩니다.
• 각 파일은 개별적으로 컴파일됩니다.
• 코드를 변경한 후 브라우저 페이지를 다시 로드하기 전에 빌드할 필요가 없습니다.
• 지역 개발에 적합합니다.

AOT - 빌드 단계 중에 TypeScript를 컴파일합니다.

• 명령줄을 통해 기계 자체에서 컴파일됩니다(더 빠름).
• 모든 코드가 함께 컴파일되어 스크립트에 HTML/CSS를 인라인화합니다.
• 컴파일러(Angular size의 절반)를 배포할 필요가 없습니다.
• 더 안전하고 원본 소스는 공개되지 않습니다.
• 프로덕션 빌드에 적합합니다.

몇 가지 답이 있지만 제 연구 결과 중 몇 가지도 추가하고 싶습니다. 왜냐하면 저는 모든 경우와 마찬가지로 실제로 수집되고 있는 것과 정말로 혼란스러웠기 때문입니다.TS-->JS변환이 발생합니다.제프의 블로그에 있는 파라를 참고로 하고 있습니다.

JIT

그TS개발자가 작성한 코드는 다음과 같이 컴파일됩니다.JS코드입니다. 자, 이것은 편집되었습니다.js코드는 브라우저에 의해 다시 컴파일되므로html사용자 작업 및 그에 따른 코드에 따라 동적으로 렌더링할 수 있습니다.angular(구성요소의 경우 변경 탐지, 종속성 주입)도 런타임에 생성됩니다.

(브라우저 컴파일러는 응용 프로그램의 지시어와 구성 요소를 해당 HTML과 CSS와 함께 가져오고 구성 요소 팩토리를 만들어 모든 뷰 생성 로직으로 인스턴스를 빠르게 제거합니다.)

Angular 2 응용 프로그램이 브라우저에서 부트스트랩되면 JIT 컴파일러는 런타임에 응용 프로그램의 구성 요소를 분석하고 메모리에서 코드를 생성하기 위해 많은 작업을 수행합니다.페이지가 새로 고쳐지면 수행된 모든 작업이 버려지고 JIT 컴파일러는 처음부터 다시 작업을 수행합니다.

AOT

그TS개발자가 작성한 코드는 다음과 같이 컴파일됩니다.JS코드, 이것은 각도에 대해서도 이미 컴파일되었습니다.자, 이 파일은 js코드는 브라우저에 의해 다시 컴파일되므로html렌더링할 수 있습니다.그러나 여기서 문제점은 의 기능이 컴파일러에 의해 이미 처리되었기 때문에 브라우저는 구성 요소 생성, 변경 감지, 종속성 주입에 대해 크게 걱정할 필요가 없다는 것입니다.그래서, 우리는 다음을 가지고 있습니다.

더 빠른 렌더링

AOT를 사용하면 브라우저는 미리 컴파일된 버전의 응용 프로그램을 다운로드합니다.브라우저는 실행 코드를 로드하므로 먼저 앱을 컴파일할 때까지 기다리지 않고 바로 응용 프로그램을 렌더링할 수 있습니다.

더 적은 비동기 요청

컴파일러는 응용 프로그램 JavaScript 내에서 외부 HTML 템플릿과 CSS 스타일 시트를 인라인화하여 해당 소스 파일에 대한 별도의 Ajax 요청을 제거합니다.

더 작은 Angular 프레임워크 다운로드 크기

앱이 이미 컴파일된 경우 Angular 컴파일러를 다운로드할 필요가 없습니다.컴파일러는 Angular 자체의 절반 정도이므로 생략하면 응용 프로그램 페이로드가 크게 줄어듭니다.

이전에 템플릿 오류 검색

AOT 컴파일러는 사용자가 보기 전에 빌드 단계에서 템플릿 바인딩 오류를 탐지하고 보고합니다.

향상된 보안

AOT는 클라이언트에 제공되기 훨씬 전에 HTML 템플릿 및 구성요소를 JavaScript 파일로 컴파일합니다.읽을 템플릿이 없고 위험한 클라이언트 측 HTML 또는 JavaScript 평가가 없기 때문에 주입 공격의 기회가 줄어듭니다.

---

남아있는 차이점은 이미 베냐민, 니사르 및 가우랑의 총탄점에서 다루어졌습니다.

언제든지 수정해 주세요.

JIT(Just-In-Time 컴파일)

JIT(Just-in-Time)는 런타임에 브라우저에서 앱을 컴파일하는 컴파일 유형입니다.

ng build
ng serve

사전 컴파일(AOT)

AOT(Ahead-of-Time)는 빌드 시점에 앱을 컴파일하는 컴파일 유형입니다.

ng build --aot
ng serve --aot

Benyamin과 Nisar는 여기서 몇 가지 좋은 점을 언급했습니다.제가 추가하겠습니다.

이론적으로, AOT는 JIT보다 생산 목적에 있어 매력적인 옵션으로 보이지만, 저는 AOT가 정말 그럴 가치가 있는지 의심했습니다!

저는 제프 크로스의 멋진 통계를 찾았고, 그것은 AOT가 앱의 부트스트래핑 시간을 크게 줄인다는 것을 증명합니다.Jeff Cross의 게시물의 아래 스냅은 당신에게 그것에 대한 빠른 아이디어를 제공할 것입니다.

JiT(Just In Time) 컴필레이션

이름 자체는 작동하는 것을 설명하며, 브라우저에서 페이지를 로드할 때 바로 코드를 컴파일합니다.브라우저가 컴파일러를 다운로드하고 응용 프로그램 코드를 빌드한 후 렌더링합니다.

그것은 개발 환경에 좋을 것입니다.

AoT(사전) 컴파일

이것은 애플리케이션을 구축할 때 모든 코드를 컴파일합니다.그래서 브라우저는 컴파일러를 다운로드하고 코드를 컴파일하는 것을 원하지 않습니다.이 방법에서 브라우저는 이미 컴파일된 코드를 로드하기만 하면 응용프로그램을 쉽게 렌더링할 수 있습니다.

프로덕션 환경에서 사용 가능

우리는 아래와 같이 JiT와 AoT 컴파일을 비교할 수 있습니다.

하루의 마지막에, AOT와 JIT는 같은 일을 합니다.둘 다 Angular 코드를 컴파일하여 기본 환경(브라우저라고도 함)에서 실행할 수 있습니다.중요한 차이점은 컴파일이 발생하는 시기입니다.AOT를 사용하면 브라우저에서 앱을 다운로드하기 전에 코드가 컴파일됩니다.JIT를 사용하면 브라우저에서 런타임에 코드가 컴파일됩니다.

비교는 다음과 같습니다.

AOT의 이점:

• 브라우저에서 구문 분석 및 컴파일과 같은 빠른 시작이 발생하지 않습니다.
• 템플릿은 개발 중에 확인됩니다(실행 중인 앱의 Javascript 콘솔에서 볼 수 있는 모든 오류가 빌드 프로세스에서 던져집니다).
• 사용하지 않는 기능으로 더 작은 파일 크기를 제거할 수 있으며 컴파일러 자체는 배송되지 않습니다.

실제로 Angular 컴파일러는 하나뿐입니다.AOT와 JIT의 차이는 타이밍과 툴링의 문제입니다.AOT를 사용하면 컴파일러는 빌드 시 한 번에 한 라이브러리 집합을 사용하여 실행됩니다. JIT를 사용하면 다른 라이브러리 집합을 사용하여 런타임에 모든 사용자에 대해 매번 실행됩니다.

우리가 각진 프로젝트를 개발하는 동안 사용하는 JIT 컴파일러.이 컴파일(TS에서 JS로 변환)은 응용 프로그램의 런타임 중에 발생합니다.운영 중인 애플리케이션 배포를 위한 애플리케이션 코드를 구축하는 동안 AOT가 사용되는 반면, webpack이라는 폴더를 생성하는 ng build --prod 명령을 사용하여 애플리케이션 코드를 구축할 때 webpack은 압축된 Javascript 형식의 모든 파일(HTML, CSS 및 유형 스크립트) 번들을 포함합니다.

프로덕션용으로 생성된 웹팩 폴더의 크기는 개발 환경용으로 생성된 폴더(...ng build 명령 사용)보다 훨씬 작습니다. 웹팩 폴더 내에 컴파일러가 포함되어 있지 않기 때문입니다. 애플리케이션의 성능을 향상시킵니다.

언급URL : https://stackoverflow.com/questions/41450226/just-in-time-jit-vs-ahead-of-time-aot-compilation-in-angular