각도 지연 로딩 경로

지난번에 Angular routing을 조사했는데 이것이 기본 설정이었고 정말 잘 작동할 것입니다.

하지만 오늘은 Angular, Lazy 로딩 경로에서 매우 멋진 것을 살펴보겠습니다!

이것이 매우 높은 수준에서 작동하는 방식입니다.

이전 예제에서는 로드 시 모든 것이 로드되므로 애플리케이션을 열면 모든 경로와 모듈이 등록되고 로드됩니다.

지연 로딩을 사용하면 해당 경로에 대한 경로와 모듈은 액세스한 후에만 로드됩니다.

시각적으로 더 잘 이해하려면 지연 로딩 없이 작동하는 방법에 대한 이 GIF를 참조하십시오.



보시다시피 경로를 전환하고 있으며 새로운 통화가 수행되지 않습니다.

지연 로드 경로 구현

이 작업을 수행하려면GitHub branch부터 시작하겠습니다.

먼저 자체 라우팅 및 모듈을 사용하여 새 구성 요소를 생성해 보겠습니다.

ng generate module lazy --route lazy --module app.module

지연 로딩을 활성화하려면 구성 요소/모듈에 자체 라우팅 및 모듈이 필요합니다.

이제 이 구성 요소를 app-routing.module.ts에 등록해 보겠습니다.

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

보시다시피 component를 사용하는 대신 loadChildren를 사용하여 모듈을 전달한 다음 실제 모듈에 액세스합니다.

이 경로를 app.component.html에도 추가해 보겠습니다.

<h1>Our first angular app</h1>
<nav>
  <ul>
    <li><a routerLink="/">Empty homepage</a></li>
    <li><a routerLink="/welcome">Welcome</a></li>
    <li><a routerLink="/second">Second</a></li>
    <li><a routerLink="/second/child">-> Second ~ Child</a></li>
    <li><a routerLink="/lazy">Lazy</a></li>
  </ul>
</nav>
<hr />
<router-outlet></router-outlet>

이제 이 시나리오를 실행하면 게으른 경로를 클릭하면 새 스크립트(모듈)가 로드되는 것을 볼 수 있습니다.



따라서 이렇게 하면 앱의 초기 로드가 더 작아질 것입니다. 정말 멋집니다.

이제 실제 데이터를 앱에 추가하여 차이점을 확인하겠습니다.

일종의 데이터 호출을 수행하도록 수정lazy.component.ts합니다.

constructor(private http: HttpClient) { 
    this.http.get(`https://reqres.in/api/users?page=2`).subscribe(res => {
        console.log('load done');
    })
}

차이점을 보여주기 위해 화려한 것이 필요하지 않습니다.

이제 다음 GIF를 확인하여 차이를 확인하세요!



이 전체 코드는 여기GitHub repo에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나