Angular 응용 프로그램은 주로 ComponentHTML Template로 구성됩니다. 브라우저가 응용 프로그램을 렌더링하기 전에 Angular 컴파일러가 구성 요소와 템플릿을 실행 가능 JavaScript로 변환해야 합니다.

응용 프로그램이 로드 될 때, JIT (Just-In-Time) 컴파일러를 사용하여 런타임에 브라우저에서 응용 프로그램을 컴파일 할 수 있습니다. 이것은 표준 개발 방식입니다. 이것은 좋은 방식이지만 결점이 있습니다.

JIT 컴파일은 런타임 성능 저하를 초래합니다. 브라우저 내 컴파일 단계로 인해 렌더링에 시간이 오래 걸립니다. Angular 컴파일러와 응용 프로그램에서 실제로 필요하지 않은 많은 라이브러리 코드가 포함되어 있으므로 응용 프로그램이 더 커집니다. 앱 크기가 커질수록 전송하는 데 시간이 오래 걸리며 로드 속도가 느려집니다.

컴파일은 많은 구성 요소 템플릿 바인딩 오류를 발견 할 수 있습니다. JIT 컴파일은 런타임에 이를 발견합니다. 이는 프로세스의 마지막 단계입니다.

AOT (ahead-of-time) 컴파일러는 템플릿 오류를 일찍 잡아 내고 빌드시 컴파일하여 성능을 향상시킬 수 있습니다.

Ahead-of-time (AOT) vs just-in-time (JIT)

사실 Angular 컴파일러는 하나만 있습니다. AOT와 JIT의 차이점은 타이밍과 툴링(tooling)입니다. AOT를 사용하면 컴파일러는 한 세트의 라이브러리를 사용하여 빌드시 한 번 실행됩니다. JIT를 사용하면 런타임마다 다른 라이브러리 세트를 사용하여 실행됩니다.

왜 AOT 컴퍼일을 사용하나요?

Faster rendering

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

비동기 요청 감소

컴파일러는 애플리케이션 JavaScript 내에서 외부 HTML template 및 CSS 스타일 시트를 인라인하여 해당 소스 파일에 대한 별도의 ajax 요청을 제거합니다.

작은 Angular framework 다운로드 크기

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

템플릿 오류를 더 빨리 감지

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

보안 강화

AOT는 HTML template와 구성 요소를 클라이언트에 제공되기 훨씬 전에 JavaScript 파일로 컴파일합니다. template을 읽을 필요가 없고 위험한 클라이언트 측 HTML 또는 JavaScript 평가가 없으므로 공격의 기회가 줄어 듭니다.

Angular CLI 에서 AOT 사용하기.

angular CLI 에서 AOT를 사용하기 위해서 webpack파일을 수정해야 합니다. ng eject명령어를 사용하면 wepack.config.js파일이 루트 경로로 이동됩니다. ng eject --aot옵션을 사용하면 AOT가 사용가능하도록 세팅되어 webpack파일이 도출됩니다. (몇번의 테스트 결과 --aot옵션을 주지않아도 AOT 플러그인이 포함되어 도출되는 것 같았습니다.)
소스를 살펴보면…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {AotPlugin} from '@ngtools/webpack'
exports = { /* ... */
module: {
rules: [
{
test: /\.ts$/,
loader: '@ngtools/webpack',
}
]
},
plugins: [
new AotPlugin({
"mainPath": "main.ts",
"exclude": [],
"tsConfigPath": "src/tsconfig.app.json"
})
]
}

로더는 webpack 플러그인과 함께 작동하여 TypeScript를 컴파일합니다. 이 두 가지를 모두 포함하고 다른 TypeScript 컴파일러 로더를 포함하지 않는 것이 중요합니다.

Options

  • tsConfigPath tsconfig.json 파일의 경로입니다. 필수 옵션입니다. tsconfig.json에서 angularCompilerOptions를 사용하여 angular 컴파일러에 옵션을 전달할 수 있습니다.
  • basePath 선택항목. 파일 경로를 확인하기 위해 컴파일러에서 사용할 루트입니다. 기본적으로 tsConfigPath 루트를 사용합니다.
  • entryModule tsconfig.json에서 angularCompilerOptions이 지정된 경우 선택 사항입니다. Angular application의 루트 모듈의 경로와 클래스 이름입니다. 이것은 path / to / file # ClassName 형식을 따릅니다.
  • mainPath entryModule이 지정된 경우 선택항목입니다. 부트 스트랩 코드가 포함 된 main.ts 파일. 플러그인은 AST를 사용하여 entryModule을 판별합니다.

  • skipCodeGeneration 선택항목으로 기본값은 false입니다. true이면 코드 생성을 비활성화하고 코드를 부트 스트랩으로 리팩토링하지 않습니다. 이렇게하면 templateUrl : "string"template : require ( "string")로 대체하여 webpack에서 자원을 적절하게 연결할 수 있습니다. 개발작업중에 webpack-dev-server의 hot loader를 사용한다면 이 옵션을 false로 설정해두어야 소스 수정시마다 변화가 바로 반영되어 보이게 될 것입니다.

  • typeChecking 선택항목으로, 기본값은 true입니다. 응용 프로그램을 통해 유형 검사를 활성화합니다. 이것은 컴파일 속도를 느리게,하지만 웹팩에서 구문 및 의미 오류가 표시됩니다.
  • exclude 선택항목. TypeScript 컴파일에서 제외 할 파일입니다.
  • compilerOptions 선택항목. tsconfig.json의 옵션을 재정의합니다.