Angular에서 지연 로딩 구현

1. Angular에서 지연 로딩 사용
2. Angular에서 지연 로딩 구현

이 튜토리얼에서는 Angular의 지연 로딩 사용법과 구현 방법에 대해 설명합니다.

지연 로딩은 웹 페이지의 리소스를 지연된 방식으로 로드하는 프로세스입니다. 이 기술은 일반적으로 최상위 수준이 아닌 많은 양의 데이터 또는 이미지가 있는 웹 페이지에서 사용됩니다.

Angular 지연 로딩은 주어진 페이지에 필요한 리소스만 로드하는 데 도움이 됩니다. 이렇게 하면 초기 다운로드 크기가 줄어들고 네트워크 요청이 줄어들어 애플리케이션 성능이 향상됩니다.

Angular의 내장 Lazy Load 모듈 또는 구성 및 빌드를 위해 Webpack에 의존하는 Angular Universal Lazy Load Module과 같은 외부 모듈을 사용하여 달성할 수 있습니다.

Angular에서 지연 로딩 사용

지연 로드의 가장 일반적인 사용 사례는 API에서 데이터를 로드하지만 모든 데이터를 가져오고 싶지는 않을 때입니다. 앱에 라우팅이 없는 단일 보기가 있는 경우 작동하지 않습니다.

지연 로딩은 애플리케이션이 처음 배포될 때 필수 모듈만 로드되고 사용되도록 보장합니다. 이는 로드 시간을 줄여 최종 사용자를 위한 응답성이 뛰어난 애플리케이션을 생성하므로 성능 면에서 애플리케이션에 이점이 있습니다.

모든 모듈을 로드하는 데 시간이 걸리므로 사용자가 처음 페이지를 방문할 때 몇 개의 모듈만 로드한 다음 필요에 따라 더 로드합니다.

Angular 지연 로딩 사용 사례에 대해 논의해 보겠습니다.

• 중요하지 않은 스크립트와 스타일시트가 필요할 때까지 연기
• 전자 상거래 웹사이트의 공급업체 대면 및 고객 대면 화면은 서로 다른 모듈로 분리될 수 있습니다. 자체적으로 지불 모듈을 구성할 수도 있습니다.
• 요청 시에만 스크립트 및 스타일시트를 로드합니다.

Angular에서 지연 로딩 구현

Angular에서 지연 로딩을 구현하는 것은 매우 간단한 과정입니다. 올바른 모듈을 추가하고 경로를 설정해야 합니다.

첫 번째 단계는 지연 로딩에 필요한 모듈을 추가하는 것입니다. @angular/router에서 LazyModule을 가져와 애플리케이션 모듈의 NgModule 데코레이터에 있는 가져오기 배열에 추가하여 이를 수행합니다.

그런 다음 요청 시 로드하거나 지연 로드해야 하는 모듈을 지정하도록 경로를 구성해야 합니다. loadChildren: 'lazy-loaded-child-routes'를 속성으로 사용하여 새 경로를 추가하거나 기존 경로를 수정합니다.

예시:

TypeScript 코드(app.component.ts):

import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent { }
@Component({
    selector: 'app-home',
    template: '<h3>Home Active!!!</h3>',
})
export class AppadComponent  {}
const routes: Routes = [
    { path: 'Home', component: AppadComponent },
    { path: 'About', loadChildren: './lazy-loading.module#SecondModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }

TypeScript 코드(lazy-loading.modules.ts):

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'app-about',
    template: '<h3>About Active!!!</h3>',
})
export class MyComponent  {}
const routes: Routes = [
    { path: '', component: MyComponent }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }
@NgModule({
    imports:      [ RootRoutingModule ],
    declarations: [ MyComponent ]
})
export class SecondModule { }

HTML 코드(app.component.html):

<h2> Example of Angular Lazy Loading</h2>
    <a routerLink='Home'>Home</a>
    <br>
    <a routerLink='About'>About</a>
    <router-outlet></router-outlet>

여기를 클릭 위의 코드가 작동하는지 확인하십시오.

가능하면 사용자가 자주 방문하는 지연 로딩 경로를 피하세요. 청크의 크기를 최대한 줄이십시오.

또한 지연 로드된 경로가 검색되면 라우터 상태를 사용하여 로더 또는 애니메이션을 표시하여 사용자가 애플리케이션이 지연되고 있다고 생각하지 않도록 합니다.