대규모 애플리케이션 구축에는 무시해서는 안 되는 세심한 세부 사항이 포함됩니다. 이러한 응용 프로그램에는 일반적으로 많은 수의 기능 모듈이 포함되어 있습니다. 그러나 이러한 모든 기능 모듈을 한 번에 모두 로드할 필요는 없습니다.

초기 로드 시 필요한 모듈만 로드하면 번들 크기가 줄어들 뿐만 아니라 로드 시간도 단축됩니다. 이 디자인 패턴을 지연 로딩이라고 하며, 말했듯이 필요할 때만 앱 모듈을 로드합니다. 이상적으로는 애플리케이션이 성공하려면 초기 로드 시간이 짧아야 합니다. 이를 위해 처음에는 필요하지 않은 구성 요소를 지연 로드하는 것이 좋습니다.

1. /app 내부에 몇 가지 새 모듈을 생성합니다.

ng g m home --routing
ng g m auth --routing

2. 새로 생성된 모듈 디렉토리 /homepage, /auth 내에서 모듈의 루트 구성 요소를 생성합니다.

ng g c home // (inside homepage newly created module)
ng g c auth // (inside auth newly created module)

3. 구성 요소 디렉터리에서 모듈 디렉터리의 루트로 구성 요소 파일을 가져오면 모듈 디렉터리가 다음과 같이 표시됩니다.

4. "homepage.module.ts" 파일에서 경로를 업데이트합니다.

// from
import { HomeComponent } from './home/home.component';
// to
import { HomeComponent } from './home.component';

5. 모듈의 리디렉션 호출이 모듈의 루트 구성 요소로 향하도록 모듈의 초기 경로를 추가합니다.

// home-routing.module.ts
import { HomeComponent } from './home.component';

const routes: Routes = [
  { 
    path: '', 
    component: HomeComponent
  }
];

👉 참고: 인증 모듈에 대해서도 4, 5단계를 반복합니다.

6. 이제 앱 모듈 내부에 모듈의 지연 로드 경로를 추가합니다.

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule)
  },
  {
    path: 'auth',
    loadChildren: () => import('./pages/auth/auth.module').then((m) => m.AuthModule)
  },
];

이제 브라우저에서 앱을 실행하고 개발 도구의 네트워크 탭에서 차이를 확인하세요 😃

💻 소스 코드:

gdgsoweto / 각도 지연 로딩

#gdg #gdgsoweto 모듈 지연 로딩으로 Angular의 성능 향상

AngularLazyLoading

이 프로젝트는 Angular CLI 버전 8.2.0으로 생성되었습니다.

개발 서버

dev 서버에 대해 실행ng serve합니다. http://localhost:4200/로 이동합니다. 소스 파일을 변경하면 앱이 자동으로 다시 로드됩니다.

코드 스캐폴딩

실행ng generate component component-name을 실행하여 새 구성 요소를 생성합니다. ng generate directive|pipe|service|class|guard|interface|enum|module 를 사용할 수도 있습니다.

짓다

ng build를 실행하여 프로젝트를 빌드합니다. 빌드 아티팩트는 dist/ 디렉토리에 저장됩니다. 프로덕션 빌드에는 --prod 플래그를 사용하십시오.

단위 테스트 실행

ng test를 실행하여 Karma을 통해 단위 테스트를 실행합니다.

종단 간 테스트 실행

ng e2e를 실행하여 Protractor을 통해 종단 간 테스트를 실행합니다.

추가 도움말

Angular CLI에 대한 추가 도움말을 보려면 ng help를 사용하거나 Angular CLI README을 확인하십시오.

앱에 부트스트랩 추가

npm install bootstrap@latest

angular.json 아래의 스크립트 배열에 css 추가 행을 추가하십시오…

View on GitHub