Angular의 Lazy Loading 정보

라우팅으로 구성 요소를 전환할 수 있게 된 후 Lazy Loading이라는 개념을 공부했습니다.
지연 로드라고 하는 것으로, 브라우저를 열었을 때에 그 어플리케이션의 데이터나 view를 모두 그 때 다운로드하는 것이 아니라, 하나씩 진행해 가면서 그 때마다 필요한 것을 읽어 가겠다고 하는 인식입니다. 한 번에 다운로드하지 않으므로 통신량을 줄일 수 있습니다.

전이도

첫 페이지는 'hoge1'에서 컴포넌트 없는 링크를 클릭해 나가는 것으로 읽어 갑니다.

방법

①app-routing.module 편집

routing.module에 다음과 같이 작성합니다.

app-routing.module.ts

//これは使用例です
const routes: Routes = [
  {
    path: 'hoge1(',
    loadChildren: () => import('./hoge1/hoge1.module').then(m => m.Hoge1Module)
  }
];

url로 localhost:4200/items 로 천이 할 때에 Hoge1Module의 내용을 읽어들인다는 의미가 됩니다.

Hoge1Module에서도 똑같이 읽어 가는 경우도 같은 형태로 기술해 갑니다.
그 때는 Hoge1RoutingModule를 작성할 필요가 있습니다. 문서에서는 Module에 쓰고 있습니다만, RoutingModule에는 화면 천이 기능을 전용으로 작성해, Module에는 그것들을 정리해 두는 것이 편해지기 위해 나누었습니다.

또한 0부터 Hoge1Module과 Hoge1RoutingModule을 동시에 작성하는 경우는 아래와 같이 커맨드를 입력하면 됩니다.

terminal

% ng g m hoge1 --routing //--routingと入れることでrouting.moduleも作成してくれる

② 첫 번째 화면 전환 대상인 Hoge1Module 편집

hoge1.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';   //画面遷移ができるようimport
import { Hoge1RoutingModule } from './hoge1-routing.module'; //自動的に追加される

import { Hoge1Component } from './hoge1.component'; //app.moduleからこちらに移動した。

@NgModule({
  declarations: [
    Hoge1Component //app.moduleからこちらに移動した。
  ],
  imports: [
    CommonModule,
    Hoge1RoutingModule  //自動的に追加される
  ]
})
export class Hoge1Module { }

③hoge1-routing.module을 편집합니다.

hoge1-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmptyComponent } from '../empty/empty.component';
import { Hoge2Component } from '../hoge2/hoge2.component';
import { Hoge1Component } from './hoge1.component';

const routes: Routes = [
  { path: '', component: Hoge1Component},  //ここを追加 なおpathは'hoge1'ではない
];

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

여기서 path를 'hoge1'로 버리면 위의 계층 (app-routing.module)에서도 path:'hoge1'url에서 ```localhost : 4200/hoge1/hoge1이됩니다. html의 routerLink로 그렇게 지정해 주면 동작적으로는 문제 없습니다만, 매우 어려워져서 하지 않는 것이 좋다.
이렇게 hoge1에서 module과 routing.module을 편집했습니다.
브라우저에서 확인하면 이렇게 되었습니다.


또한 터미널을 확인해 보면 아래와 같이 lazy loading이 되어 있습니다.

마지막으로

Rails를 사용하여 자체 제작 앱을 만든 후에는 이미지 로드가 매우 느린 것을 기억합니다. 이 개념을 알고, 로드가 느려진다는 것을 해소해 줄 것이라고 생각했습니다.

참고로 한 사이트

Angular 일본어 문서 (피쳐 모듈 지연로드)