Page tree
Skip to end of metadata
Go to start of metadata
  • Compiler

    https://en.wikipedia.org/wiki/Compiler

    • 프로그래밍 언어로 작성된 소스 코드를 다른 컴퓨터 언어로 변환하는 컴퓨터 프로그램.

    • 소스 코드를 변환하는 가장 일반적인 이유는 실행 가능한 프로그램을 만드는 것.

  • Angular Template Compiler

    • Template Strings -> Compiler -> VM CODE(running application)

  • 2 Traditional Compilations

    • JIT, AOT
  • JIT

    • https://en.wikipedia.org/wiki/Just-in-time_compilation

    • Just-in-time (JIT) compilation, also known as dynamic translation, is compilation done during execution of a program – at run time

    • JIT (Just-In-Time) 컴파일 (동적 변환이라고도 함)은 프로그램 실행 중에 컴파일된다.
    • Dynamic Compilations

    • 단점

      • Bundle Size
      • Performance
      • Bootstrapping
      • Security
  • AOT

    • https://en.wikipedia.org/wiki/Ahead-of-time_compilation

    • Ahead-of-time (AOT) compilation is the act of compiling a high-level programming language,

      into a native machine code with the intention of executing the resulting binary file natively.

      AOT produces machine optimized code

    • 고급 바이너리 파일을 네이티브로 실행하려는 목적으로 고급 프로그래밍 언어를 원시 시스템 코드로 컴파일하는 행위. AOT는 기계 최적화 코드를 생산한다.

    • Static Compilations

    • AOT Needs Application Context

      • Angular..@NgModule() Is The Context
    • 책에 의하면..
      "AOT 컴파일은 애플리케이션이 브라우저에서 실행되기 전에 앵귤러의 소스를 자바스크립트로 변환하기 때문에 플랫폼 의존적인 동적 코드를 사용하면 안됩니다!"
      (window.location.href, document.URL, ....)

 

@NgModule
@NgModule({
  imports: [
    BrowserModule, MdModule,
    HttpModule, RoutesModule...
  ],
  declarations: [
    HomeComponent, PersonComponent...
  ],
  providers: [ AwesomeService ],
  bootstrap: [ AppComponent ]
})
JIT MODE
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app.module';

// Compile (JIT) and launch the module
platformBrowserDynamic().bootstrapModule(AppModule); 
AOT MODE
// The browser platform with a compiler
import { platformBrowser } from '@angular/platform-browser';


// The generated app factory (AOT)
import { AppModuleNgFactory } from './app.module.ngfactory';


// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

 

  • AOT Compiler Dependency

    • @angular/compiler-cli

    • @angular/platform-server

    • @angular/compiler

    • typescript

$ ./node_modules/.bin/ngc -p tsconfig.aot.json

  TypeScript 컴파일러 (tsc) 대신 @ angular/compiler-cli npm 패키지에서 제공되는 ngc 컴파일러를 사용.

  ngc는 tsc의 와 거의 동일한 방식으로 동작.

  ngc에는 AOT 지향 설정이있는 자체 tsconfig.json이 필요합니다.

Tree shaking

  AOT 컴파일은 tree shaking이라는 프로세스를 통해 추가 최적화 단계를 설정.

  tree shaker는 종속 그래프를 위에서 아래로 따라가며 트리에서 죽은 잎과 같은 사용되지 않는 코드를 떨쳐냄.

  tree shaking은 소스 코드와 라이브러리 코드의 사용하지 않는 부분을 제거하여 응용 프로그램의 다운로드 크기를 크게 줄인다.
  참조되지 않은 앵귤러의 기능을 제거함으로써 실제 애플리케이션 크기의 감소를 가져온다.

  tree shaking 및 AOT 컴파일은 별도의 단계.
  tree shaking는 자바 스크립트 코드 만 타겟팅 할 수 있다.
  AOT 컴파일은 더 많은 응용 프로그램을 JavaScript로 변환하여 응용 프로그램을 "tree shaking"으로 만든다.

~30-60% Less Code
https://youtu.be/kW9cJsvcsGo?t=2212

No More Dynamic Template Compilation
Less Security Risks
No more evals
Faster Time To Interaction

기쁜소식 이랄까...
https://hackernoon.com/what-to-expect-for-in-angular-v5-6e0fc9c4b13e

  • Bootstrap과정(자세한 내용은 책 308p~312p)

  • Zone

    • 컴파일 후에 NgZone 객체를 생성(ApplicationRef)

    • NgZone은 Zone.js 기반의 앵귤러에서 비동기 코드의 실행 시점을 포착하기 위하여 사용하는 기능.

    • 앵귤러는 사용자의 이벤트, Ajax, setTimeout류와 같은 비동기 코드가 발생할 경우 상태 변경이 발생할 수 있다는 가정하에 모든 컴포넌트의 변경사항을 감지한다.

      • 자바스크립트 실행환경(VM)에서 큐에 쌓여 있는 MicroTask가 없을 경우 RxJS를 사용하여 Application의 tick을 실행하는 코드를 구독.
      • 다른 모든 비동기 코드가 실행되고 나면 이제부터 앵귤러 세상이 도래한다?
    • 루트 컴포넌트부터 하위 컴포넌트까지 각자 변경 사항 감지기가 있어서 컴포넌트 트리에 대응하는 변경 사항 감지 트리를 구성한다.

    • 기본적으로 모든 비동기 이벤트에 대하여 모든 컴포넌트에서 변경사항을 감지한다(루트에서 최하위 컴포넌트까지).

    • 뷰의 컴포넌트가 많거나 이벤트 발생빈도가 높을 경우에는 ChangeDetectionStrategy를 OnPush로 설정하여 일부 컴포넌트에서 불필요하게 변경을 감지하는 작업을 예방할 수도 있다.

 

  • No labels