Angular에서 경로 미리 로드 전략

경로를 미리 로드하여 사용자의 속도를 높입니다. 제공합니다.

Minko Gechev

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

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

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

Angular의 경로 미리 로드 전략

Angular 라우터는 preloadingStrategy이라는 구성 속성을 제공합니다. 이 속성은 지연 로드 Angular 모듈을 미리 로드하고 처리하는 로직을 정의합니다. 여기서는 가능한 두 가지 전략을 다룹니다.

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

이 게시물의 나머지 부분은 샘플 Angular 앱에 관한 내용입니다. 소스 코드는 GitHub에서 찾을 수 있습니다.

PreloadAllModules 전략 사용

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

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

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

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

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

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

<ph type="x-smartling-placeholder">
</ph>
PreloadAllModules 전략의 실제 작동 방식

또한 라우터는 path 선언을 사용하세요. 미리 로드된 모듈과 연결된 URL로 이동하면 즉시 전환이 이루어집니다.

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

빠른 링크 라이브러리는 규모가 큰 앱에 더 나은 전략을 제공합니다. 또한 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만 미리 로드하는 것을 확인할 수 있습니다. 측면 탐색 메뉴를 열면 라우터가 '정보'를 미리 로드한 다음 경로:

<ph type="x-smartling-placeholder">
</ph>
빠른 링크 미리 로드 전략 데모

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

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

결론

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

  1. 애플리케이션의 크기에 따라 올바른 미리 로드 전략을 선택합니다. <ph type="x-smartling-placeholder">
      </ph>
    • 모듈이 적은 애플리케이션은 Angular의 기본 제공 PreloadAllModules 전략을 사용할 수 있습니다.
    • 다수의 모듈이 있는 애플리케이션은 Guess.js에서 구현된 대로 Angular의 퀵링크나 예측 미리 로드와 같은 맞춤 미리 로드 전략을 사용해야 합니다.
  2. Angular 라우터의 preloadStrategy 속성을 설정하여 미리 로드 전략을 구성합니다.