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