🤩 1. Angular 8

Angular 8버전이 출시 되었다. 이번 버젼은 최신 브라우저에서 어플리케이션의 구동 시간을 단축시키고, CLI와 함께 사용할 수 있는 새로운 API를 제공한다. 필자는 기존 Angular 6에서 8버전으로 업그레이드를 하였는데, 성능적인 면에서 많이 향상이 된 것을 체감적으로도 느낄 수 있었다.

Update

update.angular.io를 방문해 자세한 정보와 가이드를 참고 하자.

ng update @angular/cli @angular/core

Differential loading

차등 로딩(Differential loading)은 브라우저가 자신의 능력에 따라 최신 자바스크립트와 원시 자바스크립트를 선택하는 과정을 말한다. 기본값으로 Angular 8은 최신 빌드(es2015)와 원시 빌드(es5)를 각각 수행하고 사용자가 어플리케이션을 로드했을 때, 사용자의 브라우저는 자동으로 필요한 번들을 선택할 것이다.

ng update 명령어를 쓰면 Angular는 차등 로딩을 위해 프로젝트의 tsconfig.json를 업데이트 한다. Angular CLI는 차등 로딩의 수행 여부를 결정하기 위해 tsconfig.json 파일의 target 프로퍼티에 명시된 자바스크립트의 버젼을 확인한다.

{
  "compilerOptions": {
  …
  "module": "esnext",
  "moduleResolution": "node",
  …
  "target": "es2015",
  …
},

target 프로퍼티가 es2015로 설정되었을 때, Angular는 두 개의 번들을 생성하고 각각 이름을 부여하고 브라우저는 런타임시에 script 태그의 속성을 통해 어떤 번들을 로드할지 결정한다.

//최신 자바스크립트
<script type="module" src="…">

//원시 자바스크립트
<script nomodule src="…">

최신 브라우저에서 초기 번들 사이즈를 40kB 이상 절감 했고, 커뮤니티에서도 얼마나 최신 자바스크립트를 많이 사용했는가에 따라 7-20% 정도의 절감 효과를 보았다는 이야기가 나왔다고 한다.

자세한 내용은 여기를 참고하자.

Route Configurations use Dynamic Imports

Angular는 어플리케이션의 일부를 라우터를 이용한 지연 로딩 기법으로 불러올 것을 권장한다. 이는 라우트 설정의 loadChildren 프로퍼티를 통해 설정할 수 있는데, 8 버전에서는 동적 임포트의 산업 표준으로 변경되었다.

//기존 방식
{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

// Angular 8 동적 임포트 방식
{path: `/admin`, loadChildren:
 () => import(`./admin/admin.module`).then(m => m.AdminModule)}

이는 VSCode 같은 툴에서 해당 임포트 구문을 이해하고 교정해줄 수 있는 에디터의 지원성을 높일 것이다.

ng update 명령어를 쓰면 Angular는 자동으로 해당 구문을 변경한다.

Builder APIs in the CLI

Angular Schematics가 ng new, ng generate, ng add, ng update와 같은 명령어에 접근하듯, 새로운 Builder API는 ng build와 ng test 그리고 ng run에 접근해 빌드나 배포 과정을 후킹할 수 있도록 한다.

공식 API 문서를 참고.

CLI의 Workspace API

기존에 Schematics를 사용하려면 angular.json을 열어 수동으로 작업 저장소 설정을 수정해야 했다. Angular 8은 angular.json을 더 쉽게 관리할 수 있는 API를 제공한다.

Workspace API에 대한 자세한 설명은 여기를 참고

Web Worker 지원

Web Workers는 cpu 자원을 많이 사용하는 어플리케이션에서 어플리케이션의 속도를 향상시킬 수 있는 좋은 방안이다. Web Workers는 이미지나 비디오 처리를 백그라운드 스레드로 옮길 수 있게 해준다. angular.io 공식홈도 내부의 검색과 색인을 위해 Web Workers를 사용했다고 한다.

이제 CLI로 Web Workers를 생성할 수 있고, worker를 생성하려면 다음 명령어를 사용하면 된다.

ng generate webWorker my-worker

web worker를 생성했다면, 원래 사용하던 대로 사용하면 된다. CLI가 web worker를 알아서 번들화 하고 정리해준다.

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

더 자세한 Angular CLI의 Web Workers에 대해서 알려면 여기를 참고.

Deprecation

Angular는 공개 API가 n + 2 버젼을 지원하도록 한다. 즉 8.1 버젼에서 폐기 처분될 기능은 9 버젼과 10 버젼까지는 작동할 것이라는 이야기이다. 예를 들어, 버젼 8에서 platform-webworker를 폐기 하게 된다.

Angular에서 폐기, 제거된 기능 관련하여 정리된 리스트를 보려면 Deprecation Guide를 참고하자.

Ivy & Bazel

Ivy를 8.0 버전에서 프리뷰 옵션 형태로 사용이 가능하다.

Angular Ivy

Angular Ivy는 가상 DOM의 한계를 지닌 이전 렌더러의 문제를 해결하기 위해 만들어 졌다. Ivy는 원본보기 엔진의 크기가 작고, 빠르고 간단하며, Tree Shaking의 장점과 Incremental DOM의 메모리 사용 공간을 줄인다. Ivy를 통해 렌더링하는 동안 메모리 할당을 최소화하고 증분 빌드를 허용하는 한 번에 하나의 파일을 컴파일하여 메모리가 제한된 장치에서 앱 성능을 향상 시키도록 설계되었다. 즉, Ivy는 컴파일 프로세스를 단순화하여 압축한다. 그리고 더 작고 더 많은 원자 함수로 나누기 때문에 Ivy는 이전 렌더러에 비해 Tree Shaking에 더 최적화되어 있다.

Ivy enable

tsconfig.app.json을 편집하여 Ivy를 선택하고 angularComplierOption 섹션을 추가하고 enableIvy를 true로 설정한다. 새로운 Angular CLI 프로젝트의 경우, newscript를 실행할 때 --enableIvy 플래그를 사용할 수 있다.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

ng build --prod

.....
chunk {1} main-es2015.xxxxxxx.js 000 kB [initial] [rendered]
.....

그 결과, 번들 크기의 15%로 줄어들었다면 이는 웹 사이트 로딩 시간이 15% 더 빨라짐을 의미한다.

참고 (blog.angularindepth.com - Angular Ivy)