앵귤러8- 더 작은 번들, CLI APIs에 기능 추가, Ivy 향상

1 minute read

Differential Loading by default

앵귤러8에서는 사용자의 웹 브라우저에 맞는 자바스크립트 모듈(es2015 or es5)을 자동적으로 번들로 내려준다. 현대적인 모듈을 사용하면 초기 번들을 내려받는 크기가 40kb 절약된다. 이는 전체의 7-20%를 차지한다고 알려져 있다.

<script type="module" src="…"> // Modern JS
<script nomodule src="…"> // Legacy JS

자바스크립트 모듈을 Lazy하게 불러오는 방법으로 앵귤러 라우터를 사용한다. 앵귤러8에서는 이를 사용하는 문법이 업계 표준(dynamic imports)을 따르는 것으로 바뀌었다.

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

이후

{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}

앵귤러 CLI에서는 ng new, ng generate, ng add와 같은 기능을 제공하고 있었는데, 이와 비슷하게 앵귤러8에서는 ‘Builder API’라는 것을 지원해준다. 이는 ng build ng test ngren 을 사용하여 배포하고 빌드 하도록 한다.

Builder API는 클라우드 환경에서의 사용에서도 강점이 있다. Firebase보다 쉽게 AngularFire에 deploy 명령을 사용하여 빌드하고 배포할 수도 있다.

ng add @angular/fire
ng run my-app:deploy

‘Schematics’를 사용하는 이전의 개발자들은 개발환경을 변경하기위해 angular.json을 수동으로 열고 변경해야만 했다. 앵귤러8에서는 이 작업을 쉽게 할 수있는 ‘Workspace APIs’라는 것을 내놓았다.

WebWorker(이미지나 비디오의 조작을 위해 백그라운드 프로세스에서 스크립트를 실행하는 방법)라는 cup-집중적인 작업을 할때 어플리케이션의 성능을 증가시켜주는 방법이 있는데, 앵귤러8에서는 CLI로 이를 지원한다.

CLI를 사용해 WebWorker 생성

ng generate webWorker my-worker

WebWorker 사용

const worker = new Worker(`./my-worker.worker`, { type: `module` });

AngularJS에서 $locationservice를 사용한다면, 앵귤러8에서는 LocationUpgradeModule을 제공해준다.

Deprecated APIs 가이드가 좀더 쉽게 바뀌었다.

Ivy는 앵귤러에서 다음세대의 렌더링 파이프라인을 구축하는 계획.

Ivy rendering pipeline: Template Html -> Template instuctions -> DOM

모든 주요한 릴리즈는 18개월동안 지원된다.

=> Differential Loading, Builder API, 향상된 Ivy는 눈여겨 볼 만 한것 같다.
=> 정기적인 업데이트와 패치로 예기치 못한 문제점이 발생할 수 있으므로 Angular 8이 LTS로 진입하면 업데이트를 진행