"차등 로딩"- Angular CLI v8의 새로운 기능

TL; DR

Angular CLI는 browserslist 구성의 브라우저 지원 범위를 이해합니다.

응용 프로그램이 ES5 브라우저를 지원해야 하고 TypeScript 대상이 es5보다 높은 경우 CLI는 호환성을 위해 자동으로 추가 번들을 만듭니다.

browserslist는 진실의 단일 소스이므로 es5BrowserSupport는 더 이상 사용되지 않습니다.

Angular CLI v8(현재 beta.15)은 "Differential Loading"이라는 새로운 기능을 제공합니다. 이를 통해 애플리케이션의 브라우저 호환성을 고려하지 않아도 됩니다.

CLI는 앱이 지원해야 하는 브라우저를 이해할 수 있으며 ES5 브라우저와 그렇지 않은 브라우저에 대해 서로 다른 번들을 만들 수 있습니다.

사용하는 방법

차등 로드를 활성화하려면 앱에 browserslist 구성이 있어야 합니다. package.json 또는 browserslist 파일에 배치할 수 있습니다. 이 구성은 이미 postcss의 autoprefixer 프로세스에서 사용되었습니다. CLI에서 최근에 만든 앱에는 이를 포함해야 하며 프로젝트에서 찾을 수 있습니다.

browserslist/browserslist

지금 가지고 있지 않아도 online demo 으로 쉽게 만들 수 있습니다. Angular CLI는 browserslist 파일이 package.json와 동일한 디렉토리에 있는 경우 조회할 수 있습니다.

준비 끝! tsconfig의 대상이 browserslist에 의해 결정된 브라우저 범위를 벗어나면 Angular CLI가 번들을 분리합니다. 하나는 원래 대상용이고 다른 하나는 ES5 브라우저용입니다.

예를 들어 Chrome과 IE 11의 최신 2개 버전을 지원합시다. browserslist는 다음과 같습니다.

last 2 Chrome versions, IE 11

그리고 tsconfig.json는 아래와 같습니다.

{
  "compilerOptions": {
    "target": "es2015",
        ...
  }
}

아시다시피 IE11은 ES5 브라우저입니다. 따라서 차동 로딩이 없으면 이 애플리케이션은 화살표 기능, es2015 등과 같은 누락된 class 기능으로 인해 IE11에서 오류를 발생시킵니다.

차동 로딩을 사용하면 Angular CLI는 이 문제를 미리 이해합니다. CLI는 앱이 ES5 브라우저를 지원해야 하는지 여부를 판단하고 현재 tsconfig의 대상이 이를 지원할 수 있는지 확인합니다.
일치하지 않는 경우 모든 번들은 main-es5.bundle.js 및 main-es2015.bundle.js 와 같이 분리됩니다.

그런 다음 ES5 번들에 대한 <script> 태그가 nomodule 속성으로 배치됩니다. ES5가 아닌 브라우저에서 ES5 번들을 로드하는 것을 방지합니다. 결과적으로 최신 브라우저에서 사용자는 브라우저에 필요한 작은 번들만 로드합니다. 로딩 성능을 향상시킬 수 있습니다.

es5BrowserSupport 옵션은 어떻습니까?

예, Angular CLI v7.3에는 차동 로딩과 같은 기능이 추가되었지만 폴리필 전용입니다. es5BrowserSupport 에서 angular.json 옵션을 사용합니다.

5 Angular CLI Features You Didn't Know About

Angular CLI v8 이후에는 CSS용 browserslist과 JavaScript용 es5BrowserSupport 모두에서 지원 브라우저를 관리하는 것이 간단하지 않기 때문에 더 이상 사용되지 않습니다. 따라서 CLI 팀은 browserslist를 애플리케이션이 ES5 브라우저를 지원해야 하는지 여부를 판단하기 위한 단일 진실 소스로 채택합니다.

결론

차동 로드가 Angular CLI v8 베타에 포함되었습니다.

CLI는 browserslist를 사용하여 애플리케이션이 ES5 브라우저를 지원해야 하는지 판단합니다.

tsconfig가 일치하지 않는 경우 CLI는 ES5 브라우저에서만 로드되는 다른 번들을 추가합니다.

이 기능을 사용해 보려면 다음 명령을 사용하여 애플리케이션을 만들어 보겠습니다.

$ npx @angular/cli@next new example-app
$ cd example-app
$ npm run build

읽어 주셔서 감사합니다!