6가지 각도 성능 조정 팁 및 요령

게시 됨: 2023-02-03

Angular는 웹 애플리케이션 구축을 위한 강력한 JavaScript 프레임워크이지만 애플리케이션이 커짐에 따라 속도가 느려지고 관리하기 어려워질 수 있습니다. Angular 성능 조정 은 Angular 앱이 원활하고 효율적으로 실행되도록 하는 데 중요한 부분입니다.

이 기사에서는 로드 시간을 개선하고 애플리케이션 크기를 줄이며 불필요한 DOM 업데이트 수를 줄이는 기술을 포함하여 Angular 애플리케이션의 성능을 최적화하기 위한 몇 가지 팁과 요령을 살펴봅니다. 노련한 Angular 개발자이든 막 시작하든 관계없이 이러한 팁과 요령은 애플리케이션의 성능을 개선하고 사용자를 위해 원활하게 실행되도록 하는 데 도움이 됩니다.

따라서 쉬운 각도 앱 성능 조정을 위한 기본 기술부터 시작하겠습니다.

각도 성능 조정을 위한 팁

Angular 앱의 성능을 쉽게 향상시킬 수 있는 다양한 팁이 있습니다. 그러나 6가지 최고의 각도 앱 최적화 팁을 선택했습니다. 여기 있습니다:

  • AoT 컴파일 사용
  • OnPush 변경 감지 전략 사용
  • 순수 파이프 사용
  • ngFor에서 TrackBy 사용
  • 코드 분할
  • 페이지 로드 개선

각각에 대해 자세히 알아 봅시다.

AoT 컴파일 사용

Angular 애플리케이션의 성능을 개선하기 위한 한 가지 중요한 팁은 AoT(Ahead-of-Time) 컴파일을 사용하는 것입니다. AoT는 Angular 구성 요소와 템플릿을 런타임 시 컴파일하지 않고 빌드 시 미리 컴파일하는 기술입니다. 이렇게 하면 응용 프로그램이 처음 로드될 때 브라우저가 템플릿과 구성 요소를 컴파일하는 데 시간을 소비할 필요가 없으므로 응용 프로그램의 로드 시간이 크게 향상될 수 있습니다.

AoT는 또한 JavaScript 코드에서 템플릿 및 구성 요소 팩터리를 인라인하여 애플리케이션의 크기를 줄이는 데 도움이 됩니다. 이렇게 하면 애플리케이션을 로드하는 데 필요한 네트워크 요청 수가 줄어들고 애플리케이션의 전체 크기가 줄어들어 로드 시간을 개선하는 데 도움이 될 수 있습니다.

Angular 애플리케이션에서 AoT 컴파일을 활성화하려면 Angular CLI를 사용하여 “–aot” 플래그로 애플리케이션을 빌드해야 합니다. 이렇게 하면 애플리케이션에 대한 AoT 컴파일이 활성화되고 결과 빌드가 성능에 최적화됩니다. 또한 Angular CLI가 AoT 컴파일에 사용하는 명령줄 도구인 "ngc" 컴파일러와 같은 도구를 직접 사용할 수 있습니다.

OnPush 변경 감지 전략 사용

OnPush 변경 감지 전략은 입력 속성이 변경되거나 이벤트가 발생할 때만 구성 요소의 변경 사항을 확인하여 Angular 애플리케이션의 성능을 향상시키는 방법입니다. 이는 변경 감지 주기가 있을 때마다 구성 요소 및 모든 하위 구성 요소의 변경 사항을 확인하는 기본 "OnPush" 전략과 반대입니다.

OnPush 전략을 사용하려면 ChangeDetectorRef 모듈을 가져오고 구성 요소 @Component 데코레이터의 changeDetection 속성을 ChangeDetectionStrategy.OnPush로 설정해야 합니다.

OnPush는 애플리케이션의 성능을 향상시킬 수 있는 강력한 전략이지만 애플리케이션을 더 복잡하게 만들 수도 있습니다. 이 전략을 구현한 후 응용 프로그램을 철저히 테스트하여 예상대로 작동하는지 확인하십시오.

순수 파이프 사용

Angular의 순수 파이프는 파이프에 전달되는 입력 값이나 매개 변수가 변경될 때만 실행되는 파이프입니다. 이렇게 하면 파이프가 실행되는 횟수가 줄어들기 때문에 Angular 애플리케이션의 성능이 향상될 수 있습니다.

Angular에서 순수 파이프를 생성하려면 파이프의 @Pipe 데코레이터에 pure: true 속성을 추가해야 합니다.

순수한 파이프를 생성할 때 Angular는 파이프에 전달된 입력 값이나 매개변수가 변경될 때만 파이프를 다시 실행한다는 점에 유의해야 합니다. 파이프가 입력으로 전달되지 않은 다른 데이터나 상태에 의존하는 경우 파이프가 올바른 출력을 생성하지 못할 수 있습니다.

또한 OnPush 변경 감지 전략을 사용하는 구성 요소 내부에 순수한 파이프가 있는 경우 입력 또는 이벤트가 방출될 때만 파이프를 실행하므로 애플리케이션의 성능을 더욱 향상시킬 수 있습니다.

복잡한 기능이 있는 순수 파이프를 사용하는 경우 입력 값이 변경될 때까지 파이프가 실행되지 않기 때문에 응용 프로그램의 성능에 부정적인 영향을 미칠 수 있음을 명심하십시오. 그런 경우에는 불순한 파이프를 사용하는 것이 좋습니다.

ngFor에서 TrackBy 사용

trackBy는 ngFor 루프의 각 항목에 대한 고유 식별자를 지정할 수 있는 Angular의 기능입니다. 이렇게 하면 컬렉션이 변경될 때 생성 및 소멸되어야 하는 DOM 요소의 수를 줄임으로써 Angular 애플리케이션의 성능을 향상시킬 수 있습니다.

ngFor 루프에서 trackBy를 사용하려면 trackBy 속성 값으로 함수를 전달해야 합니다. 이 함수는 현재 항목과 항목 자체의 인덱스를 가져와 해당 항목에 대한 고유 식별자를 반환해야 합니다.

<div *ngFor=”항목의 항목을 보자; trackBy: trackByFn”>{{ item.name }}</div>

trackByFn(인덱스: 숫자, 항목: 임의) {

item.id를 반환합니다.

}

이 예에서 trackByFn 함수는 각 항목의 고유 식별자를 id 속성으로 반환합니다.

코드 분할

코드 분할은 애플리케이션의 초기 로드 시간을 줄여 Angular 애플리케이션의 성능을 향상시키는 데 사용되는 기술입니다. 여기에는 사용자가 응용 프로그램을 탐색할 때 요청 시 로드할 수 있는 더 작고 관리하기 쉬운 청크로 응용 프로그램의 코드를 나누는 작업이 포함됩니다.

이렇게 하면 애플리케이션이 한 번에 모든 코드를 로드하는 대신 현재 페이지에 필요한 코드만 로드할 수 있으므로 애플리케이션의 초기 로드 시간이 크게 향상될 수 있습니다. 이 기술은 Angular Router 모듈과 loadChildren 속성을 사용하여 구현할 수 있습니다.

페이지 로드 개선

Angular 애플리케이션의 페이지 로드를 개선하는 방법에는 여러 가지가 있으며 그 중 일부는 다음과 같습니다.

  1. 코드 분할: 앞에서 언급했듯이 코드 분할은 응용 프로그램의 코드를 요청 시 로드할 수 있는 더 작은 청크로 나누는 기술입니다. 이렇게 하면 애플리케이션의 초기 로드 시간이 크게 향상될 수 있습니다.
  2. 지연 로딩: 지연 로딩은 필요할 때만 모듈을 로딩하는 기술입니다. 또한 초기 로드 시 로드해야 하는 코드의 양을 줄임으로써 애플리케이션의 초기 로드 시간을 개선하는 데 도움이 될 수 있습니다.
  3. 이미지 최적화: 이미지를 압축하고 적절한 이미지 형식을 사용하여 이미지를 최적화하면 다운로드해야 하는 이미지의 크기를 줄여 페이지 로드를 개선하는 데 도움이 될 수 있습니다.
  4. 브라우저 캐싱 사용: 브라우저 캐싱을 사용하면 브라우저가 리소스를 로컬에 저장하여 다시 다운로드할 필요가 없도록 하여 페이지 로드를 개선하는 데에도 도움이 됩니다.

마지막 말

결론적으로 Angular는 복잡한 고성능 웹 애플리케이션을 구축하는 데 사용할 수 있는 강력하고 다양한 프레임워크입니다. 그러나 모든 프레임워크와 마찬가지로 Angular 애플리케이션의 성능을 최적화하는 데 사용할 수 있는 특정 모범 사례와 기술이 있습니다. 코드 분할, 지연 로딩 등과 같은 기술을 활용하여 개발자는 Angular 애플리케이션의 로드 시간과 전반적인 성능을 크게 향상시킬 수 있습니다.

유명한 IT 서비스 아웃소싱 회사인 Smarsh Infotech는 미래의 애플리케이션 개발 파트너가 될 수 있습니다. 디지털 플랫폼에서 비즈니스를 개발할 계획이라면 가능한 모든 방법으로 도움을 드릴 수 있습니다. 프로젝트 아이디어를 연결하고 토론합시다.

또한 읽기: The New Angular 14: 관련 내용 모두 읽기