Angular에서 지연 로딩 경로를 사용하는 방법

소개

지연 로딩은 사용자가 현재 필요로 하는 모듈로 로드되는 모듈을 제한하는 접근 방식입니다. 이렇게 하면 애플리케이션의 성능을 개선하고 초기 번들 크기를 줄일 수 있습니다.

기본적으로 Angular는 열심히 로딩을 사용하여 모듈을 로드합니다. 이는 응용 프로그램을 실행하기 전에 모든 모듈을 로드해야 함을 의미합니다. 이것은 많은 사용 사례에 적합할 수 있지만 이 로드 시간이 성능에 영향을 미치기 시작하는 상황이 있을 수 있습니다.

참고: 다음은 Angular 8+ 앱의 지연 로딩 모듈을 다룹니다.

이 기사에서는 Angular 애플리케이션에서 지연 로딩 경로를 사용합니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
Angular 프로젝트 설정에 어느 정도 익숙합니다.

이 튜토리얼은 Node v16.4.0, npm v7.19.0, @angular/core v12.1.0 및 @angular/router v12에서 확인되었습니다. .1.0.

1단계 – 프로젝트 설정

지연 로드 경로는 루트 앱 모듈 외부에 있어야 합니다. 기능 모듈에서 지연 로드된 기능을 원할 것입니다.

먼저 Angular CLI를 사용하여 Angular Router로 새 프로젝트를 생성해 보겠습니다.

ng new angular-lazy-loading-example --routing --style=css --skip-tests

그런 다음 새 프로젝트 디렉토리로 이동합니다.

cd angular-lazy-loading-example

새 기능 모듈을 만들어 보겠습니다.

ng generate module shop --route shop --module app.module

이제 shop 기능 모듈 내에 3개의 구성 요소를 생성해 보겠습니다.

첫 번째는 장바구니 구성 요소입니다.

ng generate component shop/cart

두 번째는 checkout 구성 요소입니다.

ng generate component shop/checkout

세 번째는 확인 구성 요소입니다.

ng generate component shop/confirm

세 가지 구성 요소는 모두 shop 디렉토리에 있습니다.

참고: 앱 모듈에서 지연 로드되어야 하는 기능 모듈을 가져오지 마십시오. 그렇지 않으면 즉시 로드됩니다.

이 시점에서 shop 모듈과 3개의 구성 요소가 있는 새 Angular 프로젝트가 있어야 합니다.

2단계 – loadChildren 사용

기본 라우팅 구성에서 다음과 같은 작업을 수행할 수 있습니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'shop', loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

필요할 때만 지연 로드된 모듈을 가져오는 동적 가져오기 구문이 새롭게 추가되었습니다. 동적 가져오기는 약속 기반이며 모듈의 클래스를 호출할 수 있는 모듈에 대한 액세스를 제공합니다.

3단계 – 기능 모듈에서 경로 구성 설정

이제 남은 일은 기능 모듈에 특정한 경로를 구성하는 것입니다.

예를 들면 다음과 같습니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

const routes: Routes = [
  { path: '', component: CartComponent },
  { path: 'checkout', component: CheckoutComponent },
  { path: 'confirm', component: ConfirmComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ShopRoutingModule { }

마지막으로 기능 모듈 자체에 forRoot 대신 RouterModule의 forChild 메서드를 사용하여 경로를 포함합니다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ShopRoutingModule } from './shop-routing.module';
import { ShopComponent } from './shop.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

@NgModule({
  declarations: [
    ShopComponent,
    CartComponent,
    CheckoutComponent,
    ConfirmComponent,
  ],
  imports: [
    CommonModule,
    ShopRoutingModule
  ]
})
export class ShopModule { }

이제 routerLink 지시문을 사용하여 /shop, /shop/checkout 또는 /shop/confirm 로 이동할 수 있습니다. 모듈은 이러한 경로 중 하나를 처음 탐색할 때 로드됩니다.

터미널에서 서버를 시작합니다.

ng serve

이렇게 하면 main.js 파일과 src_app_shop_shop_module_ts.js 파일이 생성됩니다.

OutputInitial Chunk Files            | Names         |      Size
vendor.js                      | vendor        |   2.38 MB
polyfills.js                   | polyfills     | 128.58 kB
main.js                        | main          |  57.18 kB
runtime.js                     | runtime       |  12.55 kB
styles.css                     | styles        | 119 bytes

                               | Initial Total |   2.58 MB

Lazy Chunk Files               | Names         |      Size
src_app_shop_shop_module_ts.js | -             |  10.62 kB

그런 다음 브라우저를 사용하여 localhost:4200을 방문합니다.

브라우저의 DevTools를 열고 Network 탭을 확인하여 지연 로딩이 작동하는지 확인합니다. 응용 프로그램이 응용 프로그램 루트에서 처음 로드될 때 지연 청크 파일을 관찰하면 안 됩니다. /shop과 같은 경로로 이동할 때 src_app_shop_shop_module_ts.js를 관찰해야 합니다.

참고: 바로 작동하지 않으면 서버를 다시 시작하십시오.

이제 애플리케이션이 지연 로딩을 지원합니다.

결론

이 기사에서는 Angular 애플리케이션에서 지연 로딩 경로를 사용했습니다.

종속 항목이 있는 구성 요소 테스트, 서비스 테스트는 물론 모의 객체, 스텁 및 스파이를 사용하여 학습을 계속합니다.

지연 로딩에 대한 자세한 내용은 공식 문서를 참조할 수도 있습니다.