JIT 대 AOT

Just in time은 Angular가 개발할 때 사용하는 컴파일 기법으로 브라우저에 Angular 컴파일러를 제공하여 코드를 이해하고 실행할 수 있도록 합니다. 이를 통해 핫 리로딩 및 속도 코딩이 가능합니다.

Ahead of time은 생산 시간에 사용되며 빌드 프로세스에서 모든 것이 js css 및 html로 변환되기 때문에 코드용 컴파일러를 제공하지 않습니다.

AOT는 성능에 중점을 두므로 브라우저가 구문 분석 및 컴파일에 많은 시간을 소비하지 않도록 매우 최적화된 코드를 제공합니다.

AOT는 또한 작은 크기의 번들을 제공하는데, 이는 컴파일러가 번들에 포함되어 있지 않기 때문입니다.

AOT는 정적 파일에 대한 요청도 줄였습니다. 예를 들어 다음 코드를 확인하십시오.

@Component({
  selector: 'app-products',
  templateUrl: './products.container.html',
  styleUrls: ['./products.container.scss'],
})

JIT 컴파일을 사용할 때 HTTP를 통해 html 및 css 파일을 요청하므로 앱 로딩 시간이 더 빨라집니다. 기본적으로 클라이언트 및 정적 파일 서버가 동일한 로컬 시스템에 있기 때문에 이렇게 합니다. 반면에 우리가 AOT를 사용할 때 이 파일은 http 요청을 사용하여 포함되지 않지만 기본적으로 컴파일러는 파일의 문자열 버전을 생성하고 번들에 포함합니다.

AOT 컴파일을 실행할 때 구성 요소 정의에서 메서드를 구현하지 않는 경우 오류 보고서를 받을 수 있는 이점이 있습니다. 이렇게 하면 프로덕션에 버그를 보낼 위험이 줄어듭니다.

그리고 AOT가 코드 난독화를 적용하여 우리 코드의 보안을 향상시키는 것도 매우 좋습니다.

코드가 AOT를 사용하여 컴파일되었는지 어떻게 확인합니까?? angular.json 파일에서 다음 속성을 설정했는지 확인하여

"configurations": {
"production": {
  ...
  "aot": true,
  "buildOptimizer": true,
  ...
  }
}

CORS

CORS 문제를 방지하려면 다른 도메인에서 요청을 수행할 수 있게 해주는 Angular의 기능을 활성화해야 합니다.
이 설정은 개발 모드에서만 작동한다는 점을 언급할 가치가 있습니다.

이전 동작을 달성하려면 다음 단계를 따라야 합니다.

루트 디렉터리에 파일을 만듭니다. 파일 이름은 proxy.config.json입니다.

{
  "/api/*": {
    "target": "https://example",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

프록시 모드를 실행하기 위한 새로운 npm 명령을 생성합니다.

{
  "start:proxy": "ng serve --proxy-config ./proxy.config.json"
}