예를 들어 Angular의 지연 로딩

소개:

이 기사에서는 이해를 돕기 위한 예제와 함께 Angular의 지연 로딩 개념에 대해 살펴보겠습니다.

지연 로딩:

응용 프로그램의 모든 모듈과 구성 요소를 로드하는 대신 선택한 모듈과 구성 요소만 로드할 수 있으므로 로드 시간이 단축됩니다. 지연 로딩 기능은 필요한 경우에만 Angular 애플리케이션의 구성 요소, 모듈 및 기타 파일을 로드합니다. 이 개념은 복잡하고 더 큰 응용 프로그램에서 사용됩니다. 지연 로딩 개념은 애플리케이션을 매우 빠르게 만들고 메모리를 적게 사용합니다.

이 지연 로딩에 대한 한 가지 예를 살펴보겠습니다.

예:

이해하기 쉽도록 새로운 Angular 애플리케이션을 만드는 것부터 시작하겠습니다.

1단계: 명령 프롬프트 또는 터미널을 엽니다. 새 프로젝트를 만들고,

> ng new LazyDemo

새 프로젝트를 만들 때 라우팅을 허용하는지 확인하거나 다음 명령을 사용할 수 있습니다. > ng new LazyDemo — 라우팅

> cd LazyDemo

2단계: 데모 목적으로 3개의 구성 요소 또는 원하는 수를 생성합니다. 3개의 구성 요소를 생성하고 있습니다.

> ng generate component Number1
  ng generate component Number2
  ng generate component Number3

Step-3 : 각 컴포넌트 폴더에 각각의 모듈 파일 생성,

> Number1.module.ts
  Number2.module.ts
  Number3.module.ts

이제 파일/폴더 구조는 다음과 같습니다.

4단계: 각 구성 요소 폴더에 각각의 라우터 모듈 파일을 생성합니다.

> Number1-routing.module.ts
  Number2-routing.module.ts
  Number3-routing.module.ts

5단계: 기본 애플리케이션 모듈 app.module.ts에서 라우터 모듈을 가져옵니다.

import { AppRoutingModule } from './app-routing.module';
imports: [
  BrowserModule,
  AppRoutingModule
],

처음에 라우팅을 활성화했으므로 app.module.ts에서 이미 가져올 것입니다. 처음에 라우팅을 적용하는 것을 잊은 경우 이를 추가할 수 있습니다. 그렇지 않으면 이 단계를 건너뛸 수 있습니다.

6단계: 자체 라우팅 모듈에 코드를 추가하고 Number1-routing.module.ts에 다음 코드를 추가합니다.

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Number1Component } from "./number1.component";
const routes: Routes = [
    { path:"", component: Number1Component }
];
@NgModule({
    exports: [RouterModule],
    imports:[RouterModule.forChild(routes)]
})
export class Number1RouterModule{}

여기서는 forRoot 대신에 앱의 기본 라우팅 모듈에서 호출될 자식 모듈인 forChild를 호출했습니다.

마찬가지로 Number2-routing.module.ts 및 Number3-routing.module.ts에 코드를 추가합니다.

Number2-routing.module.ts에 다음 코드를 추가합니다.

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Number2Component } from "./number2.component";
const routes: Routes = [
    { path:"", component: Number2Component }
];
@NgModule({
    exports: [RouterModule],
    imports:[RouterModule.forChild(routes)]
})
export class Number2RouterModule{}

Number3-routing.module.ts에 다음 코드를 추가합니다.

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Number3Component } from "./number3.component";
const routes: Routes = [
    { path:"", component: Number3Component }
];
@NgModule({
    exports: [RouterModule],
    imports:[RouterModule.forChild(routes)]
})
export class Number3RouterModule{}

Number1.module.ts에서 다음 코드를 추가합니다.

import { NgModule } from "@angular/core";
import { Number1RouterModule } from "./Number1-routing.module";
import { Number1Component } from "./number1.component";
@NgModule({
    declarations:[Number1Component],
    imports:[Number1RouterModule],
    providers: []
})
export class Number1Module{
}

마찬가지로 다른 두 파일 Number2.module.ts 및 Number3.module.ts에 동일하게 추가합니다.

Number2.module.ts에 다음 코드를 추가합니다.

import { NgModule } from "@angular/core";
import { Number2RouterModule } from "./Number2-routing.module";
import { Number2Component } from "./number2.component";
@NgModule({
    declarations:[Number2Component],
    imports:[Number2RouterModule],
    providers: []
})
export class Number1Module{
}

Number3.module.ts에 다음 코드를 추가합니다.

import { NgModule } from "@angular/core";
import { Number3RouterModule } from "./Number3-routing.module";
import { Number3Component } from "./number3.component";
@NgModule({
    declarations:[Number3Component],
    imports:[Number3RouterModule],
    providers: []
})
export class Number3Module{
}

7단계: 앱의 기본 라우팅 모듈에서 loadChildred 속성을 사용하여 경로를 정의합니다. 기본 app-routing.module.ts에서 다음 코드를 추가합니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: 'number1',
    loadChildren: () => import('../app/number1/Number1.module').then(x => x.Number1Module)
 },
 {
  path: 'number2',
  loadChildren: () => import('../app/number2/Number2.module').then(x => x.Number2Module)
},
{
  path: 'number3',
  loadChildren: () => import('../app/number3/Number3.module').then(x => x.Number3Module)
},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers:[]
})
export class AppRoutingModule { }

참고로 https://stackoverflow.com/a/70354559/16487734

가져오기를 정의하는 loadChildren 속성에 하위 모듈을 정의하고 각 독립 모듈의 이름과 경로를 정의합니다.

8단계: Route HTML 페이지에 라우팅 링크를 추가하고 app.component.html에서 다음을 추가합니다.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h2>
    {{ title }}
  </h2>
  <button><a [routerLink]="['/number1']" routerLinkActive="router-link-active" >Number One</a></button><span></span>
  <button><a [routerLink]="['/number2']" routerLinkActive="router-link-active" >Number Two</a></button><span></span>
  <button><a [routerLink]="['/number3']" routerLinkActive="router-link-active" >Number Three</a></button>
</div>
<router-outlet></router-outlet>

이제 ng serve를 사용하여 애플리케이션을 실행합니다.

산출:

검사를 통해 이 지연 로딩의 작동을 확인할 수 있습니다. 그렇게 하려면 Ctrl+shift+I를 누르십시오. 이제 네트워크 탭에서 구성 요소가 초기에 로드되지 않은 것을 볼 수 있습니다.

이제 첫 번째 구성요소 버튼을 클릭하면 해당 구성요소만 로드됩니다.


두 번째 구성 요소 버튼을 클릭하면 해당 구성 요소가 로드되고,

요약:

실제로 필요한 리소스만 로드하여 차지하는 메모리를 줄이고 대규모 응용 프로그램에 적용됩니다. 구성 요소는 링크를 클릭한 후 로드되며 애플리케이션 초기화 또는 앱 시작 시 로드되지 않습니다. 이 기사가 예제와 간단한 정의로 도움이 되기를 바랍니다.

                      **Thank you! 😎**