라우팅 규칙 로딩 전략

빠르게 반응하는 웹 애플리케이션을 만들려면 Angular 라우팅에서 라우팅 규칙과 컴포넌트를 언제, 어떻게 로드하는지 이해해야 합니다. Angular는 로딩 방식을 제어하는 두 가지 주요 전략을 제공합니다.

1. 즉시 로딩: 라우팅 규칙과 컴포넌트를 즉시 로드합니다.
2. 지연 로딩: 라우팅 규칙과 컴포넌트를 필요할 때만 로드합니다.

각 방식은 상황에 따라 서로 다른 장점이 있습니다.

컴포넌트 즉시 로딩

component 프로퍼티로 라우팅 규칙을 정의하면 참조한 컴포넌트는 라우팅 규칙 설정과 같은 JavaScript 번들에 포함되어 즉시 로드됩니다.

import {Routes} from '@angular/router';
import {HomePage} from './components/home/home-page';
import {LoginPage} from './components/auth/login-page';

export const routes: Routes = [
  // 이 설정에서는 HomePage와 LoginPage를 모두 직접 참조하므로
  // 두 컴포넌트의 코드가 이 파일과 같은 JavaScript 번들에 포함되어 즉시 로드됩니다.
  {
    path: '',
    component: HomePage,
  },
  {
    path: 'login',
    component: LoginPage,
  },
];

이렇게 라우팅 규칙 컴포넌트를 즉시 로드하면 브라우저가 첫 페이지를 로드할 때 해당 컴포넌트의 JavaScript를 모두 다운로드하고 파싱해야 하지만, Angular에서는 컴포넌트를 바로 사용할 수 있습니다.

첫 페이지를 로드할 때 더 많은 JavaScript를 포함하면 초기 로딩은 느려지지만, 사용자가 애플리케이션 안에서 이동할 때는 더 매끄럽게 전환할 수 있습니다.

컴포넌트와 라우팅 규칙 지연 로딩

loadComponent 프로퍼티를 사용하면 라우팅 규칙이 활성화되는 시점에 컴포넌트의 JavaScript를 지연 로드할 수 있습니다. loadChildren 프로퍼티는 라우팅 규칙을 매칭하는 동안 자식 라우팅 규칙을 지연 로드합니다.

import {Routes} from '@angular/router';

export const routes: Routes = [
  {
    path: 'login',
    loadComponent: () => import('./components/auth/login-page'),
  },
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component'),
    loadChildren: () => import('./admin/admin.routes'),
  },
];

loadComponent와 loadChildren 프로퍼티에는 로더 함수를 전달합니다. 로더 함수는 각각 Angular 컴포넌트와 라우팅 규칙 모음으로 이행되는 Promise를 반환합니다. 일반적으로 이 함수에서는 표준 JavaScript 동적 import API를 사용하지만, 다른 비동기 로더 함수를 사용해도 됩니다.

지연 로드하는 파일이 default로 내보내기를 한다면, 내보낸 클래스를 선택하는 .then 호출 없이 import()의 Promise를 바로 반환할 수 있습니다.

라우팅 규칙을 지연 로드하면 초기 번들에서 많은 JavaScript를 분리할 수 있기 때문에 Angular 애플리케이션의 로딩 속도가 크게 개선될 수 있습니다. 분리된 코드는 별도의 JavaScript "청크"로 컴파일되며, 사용자가 해당 라우팅 규칙을 방문할 때만 라우터가 요청합니다.

의존성 주입 컨텍스트에서 지연 로딩하기

라우터는 현재 라우팅 규칙의 의존성 주입 컨텍스트에서 loadComponent와 loadChildren을 실행합니다. 따라서 로더 함수 안에서 inject를 호출하면 해당 라우팅 규칙에 선언된 프로바이더, 계층형 의존성 주입으로 부모 라우팅 규칙에서 상속받은 프로바이더, 전역 프로바이더에 접근할 수 있습니다. 이 방식으로 컨텍스트에 맞춰 지연 로딩을 구성할 수 있습니다.

import {Routes} from '@angular/router';
import {inject} from '@angular/core';
import {FeatureFlags} from './feature-flags';

export const routes: Routes = [
  {
    path: 'dashboard',
    // 라우팅 규칙의 의존성 주입 컨텍스트에서 실행됩니다.
    loadComponent: () => {
      const flags = inject(FeatureFlags);
      return flags.isPremium
        ? import('./dashboard/premium-dashboard')
        : import('./dashboard/basic-dashboard');
    },
  },
];

즉시 로딩과 지연 로딩 중 무엇을 사용해야 하나요?

라우팅 규칙을 즉시 로드할지 지연 로드할지 결정할 때는 여러 요소를 고려해야 합니다.

일반적으로 처음 방문하는 주요 페이지는 즉시 로드하고, 나머지 페이지는 지연 로드하는 방식을 권장합니다.

다음 단계

아웃렛으로 라우팅 규칙 내용을 표시하는 방법을 알아보세요.