• 검색

애플리케이션을 Angular 9로 업데이트하는 것은 전반적인 성능 최적화를 위한 시작에 불과합니다. 부지런한 개발자는 Angular 앱의 성능을 최적화 할 수 있는 다른 영역, 즉 빌드 및 배포 시간, 코드 최적화 및 런타임시 앱 모니터링을 위한 운영 팁을 고려해야 합니다.

2019년 마지막 분기에 출시된 Angular 9 에는 선택기 없는 지시문, 종속성 주입 변경 및 TypeScript 진단 개선과 같은 몇 가지 새로운 기능 이 도입되었습니다. 가장 중요한 것은 Ivy 컴파일러로 Angular 앱의 번들 크기가 상당히 줄었습니다. 또한 다운로드 시간이 단축되어 이전 버전의 Angular에서 응용 프로그램 성능을 저하시키는 몇 가지 문제를 해결했습니다.

이 포스팅에서는 Angular 앱을 더 작고 더 빠르고 반응성이 좋게 만드는 14가지 방법을 살펴보겠습니다.

1. Production 모드 활성화
2. AOT(Ahead Of Time)
3. Minification
4. 뷰에서 함수 호출 getter 피하기
5. 순수 파이프
6. 지연 로딩 모듈(Lazy loading modules)
7. 코드 분할
8. OnPush 변화 감지
9. 비동기 파이프
10. ngDoCheck
11. 함수별 트래킹
12. Zone.js
13. observable 구독 취소
14. Web workers

Angular 앱 속도 향상

Angular 전문가인 Bonnie Brennan 은 " Angular 를 최대한 활용하려면 픽업 트럭이 아니라 스포츠카라고 생각해야 합니다." 라고 말합니다. 즉, Angular는 매우 가볍고 빠르므로 자유롭게 실행하라는 의미입니다. 예를 들어, 모델의 모든 데이터에서 변화를 감지할 필요는 없습니다. 

최적화 빌드 및 배포

Production Build

애플리케이션을 배포하기 전에 Production Build를 만들어야 합니다. 이 모드는 컴파일, Minification 및 트리 쉐이킹 등 개발 빌드에서 사용할 수 없는 많은 중요한 최적화를 수행합니다.

JIT 와 AOT

Angular는 런타임에 앱을 컴파일하는 JIT (Just-In-Time)와 빌드 시 컴파일이 수행되는 AOT (Advance-of-Time)의 두가지 컴파일 모델을 제공합니다. 기본적으로 개발 컴파일은 JIT 컴파일을 사용하여, Angular 컴파일러를 포함해야 합니다.

AOT는 빌드 컴파일을 예상하고 컴파일 된 템플릿만 생성하며 배포 번들에서 Angular 컴파일러를 제거하여 페이로드를 약 1MB (Angular 컴파일러의 크기)만큼 줄입니다.

--AOT 스위치와 CLI 명령을 사용 컴파일하여 AOT 최적화를 활용할 수 있습니다.

ng build --aot 
ng serve --aot

Minification

공백, 개행 문자, 주석 및 블록 구분 기호를 포함 JavaScript 코드의 많은 문자는 가독성과 시각적 목적으로 사용됩니다. 코드가 올바르게 실행될 필요는 없습니다. Minification 프로세스는 이러한 문자를 제거하고 이름을 단순화하며 연결할 수 없는 코드를 무시합니다. 이를 통해, 페이지 다운로드 및 실행 시간이 단축됩니다.

이제 코드를 비교해 보겠습니다.

Minification 전 :

var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
    $scope.title = "Lorem";
    $scope.subtitle = "Ipsum";
    if (false) {
        console.log('Lorem Ipsum Dolor');
    }
});

Minification 후 :

var app=angular.module("myApp",[]);app.controller("myCtrl",function(l){l.title="Lorem",l.subtitle="Ipsum"});

Build Optimizer

Angular 팀이 만든 Build Optimize는 Angular Webpack 빌드를 더욱 최적화하는 도구입니다. 빌드 타임에 영향을 주지 않고 제거할 수 있는 코드를 식별합니다. 예를 들어, Build Optimizer는 AOT 빌드에서 @Component와 같은 데코레이터를 제거할 수 있습니다. 컴파일러는 이러한 데코레이터에서 필요한 모든 정보를 추출하므로 컴파일 시에만 필요합니다.

프로젝트의 GitHub 저장소 메인 페이지에서 Angular Build Optimizer가 이러한 변환을 구현하는 방법을 이해할 수 있습니다.

Angular 최적화를 사용하여 Production Build 만들기

프로덕션 빌드를 수행하면 위의 최적화가 적용됩니다. 다음 CLI 명령어를 사용하여 Production Build를 만들고 간단하게 배포할 수 있습니다. :

ng build --prod

그런 다음, 생성된 출력 디렉토리를 웹 서버에 복사 수 있습니다. prod 플래그를 사용하면 오류가 표시 될 수 있습니다. 그러나 그 오류를 통해, 런타임에 나중에 나타날 버그를 잡아서 해결할 수 있습니다.

Production Mode 활성화

기본적으로 Angular는 디버그 모드에서 실행되며 Assertion 검사를 추가하지만 바인딩 값에 예기치 않은 변경이 없도록 매번 ChangeDetection을 두번씩 실행합니다. ChangeDetection을 한 번만 호출하려면 Angular 앱에 다음 코드를 추가하여 Production 모드를 활성화해야 합니다. : 

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
    enableProdMode();
}

유용한 Angular 데모

저자이자 Google 개발 전문가인 Alexey Zuev는 즉시 사용 가능한 Angular 개발 프로젝트를 지원하는 온라인 IDE를 구축했습니다. 사이트를 방문하여 온라인으로 Angular AOT 및 JIT 컴파일을 테스트하는 데 사용할 수 있습니다. 여기에서 ng-run은 샘플 응용 프로그램에서 즉시 AOT 컴파일을 수행합니다. : 

AOT 컴파일 후 앱이 배포되지만 Angular 컴파일러는 없습니다.

이제 Ivy AOT 스위치를 해제하여 JIT 컴파일로 테스트 해보겠습니다.

컴파일 모드를 JIT로 변경하면 응용 프로그램이 시작될 때 “Ivy AOT compilation…” 메시지가 없다는 것이 유일한 차이점입니다. 그러나 다운로드한 파일을 비교 위해 Chrome 도구를 열면 JIT 모드에서는 애플리케이션이 Angular 컴파일러 및  관련 번들이 있어야 하며, 있 AOT로 앱을 사전 컴파일 할 때는 다운로드 할 필요가 없다는 것을 알 수 있습니다. : 

Angular 코드 최적화

지연 로딩 모듈(Lazy Loading Modules)

Angular는 요청 시 페이지를 쉽게 로드할 수 있는 지연 로딩(Lazy Loading)을 제공합니다. 지연 로딩(Lazy Loading)을 사용하면 사용자가 해당 특정 모듈의 경로를 탐색 할 때만 모듈이 로드됩니다. Angular 팀이 이 기능을 라우터에 내장했으며 모든 기능이 지원됩니다. 따라서 지연 로딩(Lazy Loading)은 사용하기 간단합니다.

그러나 간과하기 쉽지만, 지연 로딩(Lazy Loading)을 이용하기 위해 반드시 필요한 사실 중 하나는 더 많은 모듈이 필요하다는 것입니다. 응용 프로그램을 모듈로 나누면 얻을 수 있는 이점은 필요에 따라 모듈을 로드하는 기능입니다. 30,000 줄의 코드를 작성했는데 모두 하나의 모듈에 있는 경우 지연 로딩(Lazy Loading) 기능을 활용할 수 없으며 앱의 속도가 느려질 수 있습니다.

지연 로딩(Lazy Loading)이 없는 라우트 구성의 예는 다음과 같습니다.

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: CustomersComponent
  },
  {
    path: 'orders',
    loadChildren: OrdersComponent
  }
];

지연 로딩(Lazy loading)이 적용된 동일한 라우트 구성의 예입니다.

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

코드 분할

초기 로드 시간을 줄이고 페이지 탐색 속도를 높이는 한 가지 방법은 코드 분할입니다. 웹 응용 프로그램이 더욱 복잡해지면서 사용자에게 제공되는 JavaScript 파일의 크기가 커졌습니다. 큰 JavaScript 파일은 특히 모바일 사용자의 경우 브라우저에서 상호 작용 시간을 지연시킬 수 있습니다.

코드 분할은 기능 손실 없이 앱의 JavaScript 번들을 효율적으로 줄입니다. 이 기술을 사용하면 사용자가 다른 경로로 이동하거나 컴포넌트를 열거나 확장할 할 때 점진적으로 로드할 수있는 JavaScript 코드를 여러 부분으로 나눌 수 있습니다.

여기에는 경로 탐색 없이 개별 구성 요소를 느리게 로드하는 컴포넌트 수준 코드 분할과 개별 경로를 느리게 로드하는 경로 수준 코드 분할이라는 두 가지 주요 접근 방식이 있습니다.

OnPush 변경 감지

기본적으로 Angular는 모든 컴포넌트를 검사하여 변경 사항이 있는지 확인하고 그에 따라 뷰를 업데이트합니다. 비교적 빠른 프로세스이지만 애플리케이션이 확장됨에 따라 이러한 빈번한 업데이트 확인이 느려집니다.