이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Angular에서 경로 미리 로드 전략

사용자의 탐색 속도를 높이기 위해 미리 경로를 미리 로드합니다.

민코 게체프

경로 수준 코드 분할을 사용하면 초기에 필요하지 않은 경로와 관련된 자바스크립트를 지연시켜 애플리케이션의 초기 로드 시간을 줄일 수 있습니다. 이렇게 하면 Angular 라우터는 사용자가 특정 경로로 이동할 때까지 기다렸다가 네트워크 요청을 트리거하여 관련 JavaScript를 다운로드합니다.

이 기법은 초기 페이지 로드에는 유용하지만 사용자의 네트워크 지연 시간 및 대역폭에 따라 탐색 속도가 느려질 수 있습니다. 이 문제를 해결하는 한 가지 방법은 경로 미리 로드입니다. 미리 로드를 사용하면 사용자가 지정된 경로에 있을 때 다음에 필요할 가능성이 높은 경로와 관련된 자바스크립트를 다운로드하고 캐시할 수 있습니다. Angular 라우터는 이 기능을 기본적으로 제공합니다.

이 게시물에서는 Angular에서 JavaScript 미리 로드를 활용하여 경로 수준 코드 분할을 사용할 때 탐색 속도를 높이는 방법을 알아봅니다.

Angular의 경로 미리 로드 전략

Angular 라우터는 preloadingStrategy라는 구성 속성을 제공합니다. 이 구성 속성은 지연 로드 Angular 모듈을 미리 로드하고 처리하는 로직을 정의합니다. 여기서는 2가지 전략을 살펴보겠습니다.

PreloadAllModules: 이름에서 알 수 있듯이 모든 지연 로드 경로를 미리 로드합니다.
QuicklinkStrategy: 현재 페이지의 링크와 연결된 경로만 미리 로드합니다.

이 게시물의 나머지 부분은 샘플 Angular 앱을 참조합니다. 소스 코드는 GitHub에서 확인할 수 있습니다.

`PreloadAllModules` 전략 사용

샘플 앱에는 여러 지연 로드 경로가 있습니다. Angular에 내장된 PreloadAllModules 전략을 사용하여 모든 확장 요소를 미리 로드하려면 이를 라우터 구성에서 preloadingStrategy 속성 값으로 지정합니다.

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

이제 애플리케이션을 제공하고 Chrome DevTools에서 네트워크 패널을 확인합니다.

`Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
네트워크 탭을 클릭합니다.

애플리케이션을 열 때 라우터가 백그라운드에서 nyan-nyan-module.js 및 about-about-module.js를 다운로드한 것을 확인할 수 있습니다.

PreloadAllModules 전략의 작동 방식

또한 라우터는 모듈의 경로 선언을 등록하므로 미리 로드된 모듈과 연결된 URL로 이동하면 즉시 전환이 이루어집니다.

빠른 링크 미리 로드 전략 사용

PreloadAllModules는 많은 경우에 유용합니다. 그러나 모듈이 수십 개 있는 경우 적극적인 미리 로드로 인해 네트워크 사용량이 크게 증가할 수 있습니다. 또한 라우터는 미리 로드된 모든 모듈에 경로를 등록해야 하므로 UI 스레드에서 집약적인 계산이 발생하고 사용자 환경이 느려질 수 있습니다.

quicklink 라이브러리는 대규모 앱에 더 나은 전략을 제공합니다. IntersectionObserver API를 사용하여 현재 페이지에 표시된 링크와 연결된 모듈만 미리 로드합니다.

ngx-quicklink 패키지를 사용하여 Angular 앱에 빠른 링크를 추가할 수 있습니다. 먼저 npm에서 패키지를 설치합니다.

npm install --save ngx-quicklink

프로젝트에서 사용할 수 있게 되면 라우터의 preloadingStrategy를 지정하고 QuicklinkModule를 가져와 QuicklinkStrategy를 사용할 수 있습니다.

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

이제 애플리케이션을 다시 열면 페이지 중앙의 버튼에 라우터 링크가 있으므로 라우터가 nyan-nyan-module.js만 미리 로드합니다. 그리고 측면 탐색을 열면 라우터가 'About' 경로를 미리 로드하는 것을 확인할 수 있습니다.

빠른 링크 미리 로드 전략의 데모입니다.

여러 지연 로드 모듈에서 빠른 링크 미리 로드 전략 사용

위의 예시는 기본 애플리케이션에서 작동하지만 애플리케이션에 지연 로드 모듈이 여러 개 포함되어 있으면 QuicklinkModule를 공유 모듈로 가져와 내보낸 다음 지연 로드 모듈로 가져와야 합니다.

먼저 ngx-quicklink에서 공유 모듈로 QuicklinkModule를 가져와서 내보냅니다.

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

그런 다음 SharedModule를 모든 지연 로드 모듈로 가져옵니다.

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

이제 지연 로드 모듈에서 Quicklinks를 사용할 수 있습니다.

기본 미리 로드 이상의 기능

빠른 링크를 통한 선택적 미리 로드는 탐색 속도를 크게 향상할 수 있지만 Guess.js로 구현되는 예측 미리 로드를 사용하여 미리 로드 전략의 네트워크 효율성을 더욱 높일 수 있습니다. Guess.js는 Google 애널리틱스 또는 다른 분석 제공업체의 보고서를 분석하여 사용자의 탐색 여정을 예측하고 다음에 필요할 가능성이 높은 자바스크립트 청크만 미리 로드할 수 있습니다.

Gues.js 사이트의 이 페이지에서 Angular와 함께 Guess.js를 사용하는 방법을 알아보세요.

결론

경로 수준 코드 분할을 사용할 때 탐색 속도를 높이려면 다음을 따르세요.

애플리케이션 크기에 따라 적절한 미리 로드 전략을 선택합니다.
- 모듈이 적은 애플리케이션은 Angular의 기본 제공 PreloadAllModules 전략을 사용할 수 있습니다.
- 모듈이 많은 애플리케이션은 Guess.js에 구현된 Angular의 퀵링크나 예측 미리 로드와 같은 맞춤 미리 로드 전략을 사용해야 합니다.
Angular 라우터의 preloadStrategy 속성을 설정하여 미리 로드 전략을 구성합니다.