집 > 기사 > 웹 프론트엔드 > 라우팅을 사용한 Angular 모듈의 지연 로딩

라우팅을 사용한 Angular 모듈의 지연 로딩

小云云원래의: 2018-01-30 09:06:521465검색

이 글에서는 라우팅을 이용하여 Angular 모듈의 로딩을 지연시키는 방법을 주로 소개하고 있는데, 에디터가 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 그것이 모두에게 도움이 되기를 바랍니다.

Angular는 매우 모듈식이며 모듈성의 매우 유용한 기능은 모듈이 지연 로딩 지점 역할을 한다는 것입니다. 지연 로딩은 모듈 및 여기에 포함된 모든 구성 요소와 같은 리소스를 백그라운드에서 로드할 수 있음을 의미합니다. 이렇게 하면 Angular는 첫 번째 화면에서 서버에서 모든 파일을 다운로드할 필요가 없으며 사용자가 요청할 때까지 해당 모듈을 다운로드하지 않습니다. 이는 성능을 향상시키고 스크롤 없이 볼 수 있는 부분의 초기 다운로드 파일 크기를 줄이는 데 큰 도움이 됩니다. 그리고 쉽게 설정할 수 있습니다.

여기에서는 이 기능의 작동 방식을 보여주기 위해 간단한 예를 사용합니다. 애플리케이션을 여러 개의 다른 모듈로 분할하고 필요할 때 느리게 로드합니다.

지연 로딩 경로는 루트 모듈 외부에서 정의해야 하므로 지연 로딩이 필요한 함수를 함수 모듈에 포함시켜야 합니다.

Angular CLI를 사용하여 데모 프로젝트 Demo를 만듭니다.

ng new demo

그런 다음 데모 폴더로 이동합니다. 필요한 패키지를 설치합니다.

npm i

설치 후 새로운 모듈샵을 생성합니다. 각도 CLI에서 ng는 명령 프롬프트 명령이고, g는 특정 유형의 새 항목을 생성하는 데 사용되는 생성을 나타냅니다.

shop이라는 새 모듈을 생성하는 방법은 다음과 같습니다.

ng g module shop

이렇게 하면 Angular 프로젝트의 src/app 파일 아래에 새 폴더가 생성되고 shop.module.ts 문서라는 모듈 정의가 추가됩니다.

그런 다음 기본 앱 모듈과 새로 생성된 Shop 모듈에 컴포넌트를 생성합니다.

ng g c home/home
ng g c shop/cart
ng g c shop/checkout 
ng g c shop/confirm

CLI는 home을 앱 모듈에 할당하고, 장바구니, 결제, 확인을 shop 모듈에 할당합니다. 예를 들어

이때 shop.module.ts의 내용은 다음과 같습니다.

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { CheckoutComponent } from &#39;./checkout/checkout.component&#39;;
import { CartComponent } from &#39;./cart/cart.component&#39;;
import { ConfirmComponent } from &#39;./confirm/confirm.component&#39;;

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

루트 구성 요소 수정

기본적으로 Angular CLI에서 생성된 app.comComponent.ts 구성 요소는 Angular에 대한 일부 소개 정보가 포함된 애플리케이션의 기본 페이지입니다. 기본 생성된 app.comComponent.html 콘텐츠를 다음 콘텐츠로 수정합니다.

<!--The content below is only a placeholder and can be replaced.-->
<h1>Lazy Load Module</h1>
<a [routerLink]="[&#39;/shop&#39;]" >Shop Cart</a>
<router-outlet>
</router-outlet>

여기에는 자리 표시자 라우터 콘센트가 제공되며 각 구성 요소가 여기에 표시됩니다.

동시에 /shop/cart 구성 요소로 직접 이동할 수 있는 탐색 링크가 제공됩니다.

Create Route

Root Route

먼저 루트 경로를 생성합니다.

앱 폴더에 main.routing.ts라는 라우팅 구성 파일을 추가합니다. 내용은 다음과 같습니다.

import { Routes } from &#39;@angular/router&#39;;
// HomeComponent this components will be eager loaded
import { HomeComponent } from &#39;./home/home.component&#39;;

export const routes: Routes = [
  { path: &#39;&#39;, component: HomeComponent, pathMatch: &#39;full&#39; },
  { path: &#39;shop&#39;, loadChildren: &#39;./shop/shop.module#ShopModule&#39; },
  { path: &#39;**&#39;, component: HomeComponent }
];

그 중 home 컴포넌트는 정상적으로 미리 로딩되어 있습니다.

주의할 점은 다음과 같습니다.

1. 우리는 모듈 로딩을 지연시키기 위해 loadChildren을 사용합니다. 초기 로딩에 사용되는 컴포넌트를 사용하는 대신.
2. 조기 로딩을 방지하기 위해 기호 대신 문자열을 사용합니다.
3. 모듈의 경로를 정의할 뿐만 아니라 모듈의 클래스 이름도 제공합니다.

app.module.ts에서 루트 라우팅을 활성화합니다. 주로 루트 경로를 활성화하려면 forRoot를 사용해야 합니다.

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes)
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

모듈 라우팅

모듈 라우팅 정의

shop 모듈의 경우 경로 정의에 특별한 것은 없습니다. 여기서는 shop.route.ts라는 경로 정의 파일을 정의할 수 있으며 내용은 다음과 같습니다. 표시:

import { Routes } from &#39;@angular/router&#39;; 
import { CartComponent } from &#39;./cart/cart.component&#39;; 
import { CheckoutComponent } from &#39;./checkout/checkout.component&#39;; 
import { ConfirmComponent } from &#39;./confirm/confirm.component&#39;; 
export const routes: Routes = [   
     { path: &#39;&#39;, component: CartComponent },   
     { path: &#39;checkout&#39;, component: CheckoutComponent },  
     { path: &#39;confirm&#39;, component: ConfirmComponent } 
];

이 경로 정의를 사용하려면 모듈 정의 파일 shop.module.ts 파일도 수정해야 합니다. 하위 경로를 활성화하려면 forChild를 사용해야 합니다.

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { CheckoutComponent } from &#39;./checkout/checkout.component&#39;;
import { CartComponent } from &#39;./cart/cart.component&#39;;
import { ConfirmComponent } from &#39;./confirm/confirm.component&#39;;

import { routes } from &#39;./shop.routing&#39;; 
import { RouterModule } from &#39;@angular/router&#39;;

@NgModule({
 imports: [
  CommonModule,
  RouterModule.forChild(routes)
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

모든 것이 준비되었습니다.

지연 로딩 테스트

지금 앱을 시작하세요.

ng serve

애플리케이션은 기본적으로 포트 4200에서 시작됩니다. 브라우저를 열고 http://localhost:4200/

홈페이지에 대한 네트워크 액세스는 다음과 같으며, 내용은 포함되지 않습니다. 기능 모듈의.

먼저 네트워크 요청 기록을 삭제합니다.

그런 다음 링크를 클릭하고 /shop/cart에 접속하면 다음과 같이 네트워크 요청이 지연된 로딩 기능 모듈을 포함하는 새로운 스크립트 파일이 로드되는 것을 볼 수 있습니다.

기능 모듈만 로드됩니다.

라우팅을 사용한 Angular 모듈의 지연 로딩

관련 기사