Angular에서 경로 미리 로드 전략

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

Minko Gechev

경로 수준 코드 분할을 사용하면 처음에는 필요하지 않은 경로와 연결된 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.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 애널리틱스 또는 다른 분석 제공업체의 보고서를 분석하여 사용자의 탐색 여정을 예측하고 다음에 필요할 가능성이 높은 JavaScript 청크만 미리 로드할 수 있습니다.

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

결론

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

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