Angular CLI를 사용한 성능 예산

시간 경과에 따른 번들 크기를 모니터링하여 애플리케이션이 빠른 속도를 유지하도록 하세요.

Minko Gechev

Angular 애플리케이션을 최적화하는 것도 중요하지만 시간이 지나도 성능이 저하되지 않도록 하려면 어떻게 해야 할까요? 성능 측정항목을 도입하고 각 코드 변경에 관해 모니터링함으로써

중요한 측정항목 중 하나는 애플리케이션과 함께 제공되는 자바스크립트의 크기입니다. 각 빌드 또는 pull 요청에서 모니터링하는 성능 예산을 도입하면 시간이 지나도 최적화가 지속되도록 할 수 있습니다.

성능 예산 계산

이 온라인 예산 계산기를 사용하여 목표로 하는 상호작용 시작 시간에 따라 앱에서 로드할 수 있는 JavaScript의 양을 추정할 수 있습니다.

예산 계산기

Angular CLI에서 성능 예산 구성

타겟 자바스크립트 예산이 정해지면 Angular 명령줄 인터페이스 (CLI)를 사용하여 이를 시행할 수 있습니다. 작동 방식을 확인하려면 GitHub에서 이 샘플 앱을 확인하세요.

angular.json에서 다음과 같은 예산이 구성된 것을 확인할 수 있습니다.

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

다음은 지정된 항목을 요약한 내용입니다.

  • main이라는 JavaScript 번들에 대한 예산이 있습니다.
  • main 번들이 170KB보다 커지면 앱을 빌드할 때 Angular CLI가 콘솔에 경고를 표시합니다.
  • main 번들의 크기가 250KB를 초과하면 빌드가 실패합니다.

이제 ng build --prod를 실행하여 앱을 빌드해 봅니다.

콘솔에 다음 오류가 표시됩니다.

예산 오류

빌드 오류를 수정하려면 rxjs/internal/operators에서 가져오기가 포함된 app.component.ts를 살펴보세요. 이는 rxjs의 소비자가 사용하면 안 되는 비공개 가져오기입니다. 번들 크기가 크게 증가합니다. 올바른 가져오기(rxjs/operators)로 업데이트하고 빌드를 다시 실행하면 예산 검사를 성공적으로 통과한 것을 확인할 수 있습니다.

Angular CLI에서는 차등 로드가 기본적으로 사용 설정되어 있으므로 ng build 명령어는 다음과 같이 두 개의 앱 빌드를 생성합니다.

  • ECMAScript 2015를 지원하는 브라우저용 빌드입니다. 이 빌드에는 폴리필이 더 적고 최신 JavaScript 구문이 포함되어 있습니다. 이 구문은 더 표현력이 뛰어나므로 번들이 작아집니다.
  • ECMAScript 2015를 지원하지 않는 이전 브라우저용 빌드 이전 구문은 표현력이 떨어지고 폴리필이 더 많이 필요하므로 번들이 커졌습니다.

샘플 앱의 index.html 파일은 두 빌드를 모두 참조하므로 최신 브라우저에서 더 작은 ECMAScript 2015 빌드를 활용하고 이전 브라우저에서 ECMAScript 5 빌드를 사용할 수 있습니다.

지속적 통합의 일부로 예산 집행

지속적 통합 (CI)을 사용하면 시간 경과에 따라 앱의 예산을 편리하게 모니터링할 수 있습니다. 다행히 이를 설정하는 가장 빠른 방법은 Angular CLI로 앱을 빌드하는 것입니다. 추가 단계가 필요하지 않습니다. JavaScript 번들이 예산을 초과할 때마다 프로세스가 코드 1과 함께 종료되고 빌드가 실패합니다.

원하는 경우 bundlesize 및 Lighthouse를 사용하여 실적 예산을 시행할 수도 있습니다. Angular CLI와 Lighthouse의 성능 예산의 주요 차이점은 검사 수행 시간입니다. Angular CLI는 빌드 시 검사를 수행하여 프로덕션 자산을 살펴보고 크기를 확인합니다. 하지만 Lighthouse는 애플리케이션의 배포된 버전을 열고 애셋 크기를 측정합니다. 두 가지 접근 방식에 모두 장단점이 있습니다. Angular CLI가 수행하는 검사는 단일 디스크 조회이므로 덜 강력하지만 훨씬 더 빠릅니다. 반면 LightWallet의 LightWallet은 동적으로 로드된 리소스를 고려하여 매우 정확한 검사를 수행할 수 있지만 앱이 실행될 때마다 앱을 배포하고 열어야 합니다.

bundlesize는 Angular CLI의 예산 확인과 매우 유사합니다. 주요 차이점은 bundlesize가 GitHub의 사용자 인터페이스에서 직접 확인 결과를 표시할 수 있다는 것입니다.

결론

시간이 지나도 Angular 앱의 성능이 저하되지 않도록 Angular CLI로 성능 예산을 설정합니다.

  1. 예산 계산기를 사용하거나 조직의 관행을 따라 리소스 크기의 기준을 설정합니다.
  2. angular.json의 projects.[PROJECT-NAME].architect.build.configurations.production.budgets에서 크기 예산 구성
  3. 예산은 Angular CLI를 사용하여 각 빌드에 자동으로 적용됩니다.
  4. 지속적 통합의 일부로 예산 모니터링을 도입하는 것을 고려하세요 (Angular CLI로도 수행 가능).