Angular에서 경로 미리 로드 전략

미리 경로를 로드하여 사용자의 탐색 속도를 높입니다.

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

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

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

Angular의 경로 미리 로드 전략

Angular 라우터는 지연 로드된 Angular 모듈을 미리 로드하고 처리하는 로직을 정의하는 preloadingStrategy라는 구성 속성을 제공합니다. 다음과 같은 두 가지 전략을 다룹니다.

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

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

PreloadAllModules 전략 사용

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

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

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

이제 애플리케이션을 게시하고 Chrome DevTools의 네트워크 패널을 살펴봅니다.

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

애플리케이션을 열었을 때 라우터가 백그라운드에서 nyan-nyan-module.jsabout-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만 미리 로드하는 것을 확인할 수 있습니다. 측면 탐색을 열면 라우터가 '정보' 경로를 미리 로드하는 것을 볼 수 있습니다.

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

위의 예는 기본 애플리케이션에는 작동하지만 애플리케이션에 지연 로드된 모듈이 여러 개 포함된 경우 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 애널리틱스 또는 다른 분석 제공업체의 보고서를 분석하여 사용자의 탐색 여정을 예측하고 다음에 필요할 가능성이 높은 JavaScript 청크만 미리 로드할 수 있습니다.

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

결론

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

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