미리 경로를 로드하여 사용자의 탐색 속도를 높입니다.
경로 수준 코드 분할을 사용하면 처음에는 필요하지 않은 경로와 연결된 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의 네트워크 패널을 살펴봅니다.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
애플리케이션을 열었을 때 라우터가 백그라운드에서 nyan-nyan-module.js
및 about-about-module.js
를 다운로드한 것을 확인할 수 있습니다.
라우터는 미리 로드된 모듈과 연결된 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
만 미리 로드하는 것을 확인할 수 있습니다. 측면 탐색을 열면 라우터가 '정보' 경로를 미리 로드하는 것을 볼 수 있습니다.
여러 지연 로드 모듈에서 Quicklink 미리 로드 전략 사용
위의 예는 기본 애플리케이션에는 작동하지만 애플리케이션에 지연 로드된 모듈이 여러 개 포함된 경우 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를 사용하는 방법을 알아보세요.
결론
경로 수준 코드 분할을 사용할 때 탐색 속도를 높이려면 다음 단계를 따르세요.
- 애플리케이션 크기에 따라 적절한 미리 로드 전략을 선택합니다.
- 모듈이 적은 애플리케이션은 Angular의 내장
PreloadAllModules
전략을 사용할 수 있습니다. - 모듈이 많은 애플리케이션은 Guess.js에 구현된 Angular의 빠른 링크 또는 예측 미리 로드와 같은 맞춤 미리 로드 전략을 사용해야 합니다.
- 모듈이 적은 애플리케이션은 Angular의 내장
- Angular 라우터의
preloadStrategy
속성을 설정하여 미리 로드 전략을 구성합니다.