angular 2 경로 사전 로드 정책

1.문제 설명
길 을 게 으 르 게 불 러 오지 않 았 을 때 처음 사용 할 때 불 러 오 는 것 이 매우 느 려 서 사용자 체험 에 영향 을 줍 니 다.angular 2 는 loadChildren 을 사용 하여 게 으 르 게 불 러 올 수 있 습 니 다.처음 사용 할 때 필요 한 모듈 만 불 러 옵 니 다.다른 모듈 은 실제로 사용 할 때 만 불 러 옵 니 다.이때 브 라 우 저 콘 솔 을 열 어 js 불 러 오 는 것 을 볼 때사용 할 때 해당 하 는 js 를 불 러 오고 해당 모듈 의 기능 을 처음 클릭 할 때 멈 추 는 것 을 발견 할 수 있 습 니 다.나중에 사용 하면 안 됩 니 다.그러면 사용자 체험 이 좋 지 않 습 니 다.다음 에 미리 불 러 오기 전략 을 사용 하면 이 문 제 를 해결 할 수 있 습 니 다.
2.미리 불 러 오기 정책
RouterModule.forRoot 의 두 번 째 설정 옵션 이 추가 되 었 습 니 다.이 설정 옵션 중 하 나 는 preloading Strategy 설정 입 니 다.물론 다른 설정 도 있 습 니 다.여 기 는 preloading Strategy 만 말 합 니 다.이 설정 은 사전 로드 전략 설정 입 니 다.우 리 는 자신의 사전 로드 전략 을 실현 해 야 합 니 다.미리 로드 하지 않 아 도 되 는 장면 에서 우 리 는 설정 하지 않 아 도 됩 니 다.우선 selective-proading-strategy.ts 파일 을 새로 만 듭 니 다.class 를 사용 하여 Preloading Strategy 인 터 페 이 스 를 실현 하 는 preload 방법 입 니 다.코드 는 다음 과 같 습 니 다.

import { PreloadingStrategy, Route } from "@angular/router";
import { Observable } from "rxjs";
/**
 *      
 */
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    //      data: {preload: true}    
    return route.data && route.data && route.data['preload'] ? load() : Observable.of(null);
  }

}

위의 뜻 은 간단 합 니 다.경로 에 data:{preload:true}인 자 를 설정 하면 이 안의 정책 은 load()를 되 돌려 줍 니 다.미리 불 러 올 필요 가 있다 는 뜻 입 니 다.설정 이 없 으 면 미리 불 러 오지 않 아 도 됩 니 다.물론 반대로 불 러 올 수도 있 습 니 다.기본 값 은 미리 불 러 올 필요 가 없 을 때 만 불 러 오지 않 습 니 다.제 github 에 있 는 것 처럼.스스로 유연 하 게 운용 하 다.
그 다음 에 경로 에 정책 을 추가 합 니 다.즉,RouterModule.forRoot 의 설정 입 니 다.코드 는 다음 과 같 습 니 다.

import { NgModule }       from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import {SelectivePreloadingStrategy} from "./selective-preloading-strategy";

import { LoginComponent }   from './login/login.component';
import { MainComponent }  from './main/main.component';



/**
 * app  
 */
const routes: Routes = [
 { path: '', redirectTo: '/login', pathMatch: 'full' },
 { 
   path: 'login', 
   component: LoginComponent
 },
 { 
   path: 'app', 
   component: MainComponent,
   loadChildren: 'app/main/main.module#MainModule',
   data: {preload: true}
 }
];

export const appRoutes=RouterModule.forRoot(routes,{preloadingStrategy: SelectivePreloadingStrategy});

AppModule 의 providers 에 추가 해 야 합 니 다.코드 는 다음 과 같 습 니 다.

/**
 * app  
 */
@NgModule({
 imports: [
  appRoutes,
  BrowserModule,
  BrowserAnimationsModule,
  NgbModule.forRoot(),
  MainModule,
  LoginModule
 ],
 declarations: [
  AppComponent,
  ToastBoxComponent,
  ToastComponent,
  SpinComponent
 ],
 providers: [AppService,ToastService,HttpService,SpinService,SelectivePreloadingStrategy],
 exports:[ToastBoxComponent,SpinComponent],
 bootstrap: [ AppComponent ]
})
export class AppModule {}

 다음 경로 에서 사용 합 니 다.코드 는 다음 과 같 습 니 다.

import { NgModule, OnInit } from '@angular/core';
import { RouterModule, Routes, Router } from '@angular/router';

/**
 *     
 */
const routes: Routes = [
   { path: 'home', loadChildren: 'app/home/home.module#HomeModule', data: {preload: true} },
   { path: 'demo', loadChildren: 'app/demo/demo.module#DemoModule', data: {preload: true} },
];

export const mainRoutes = RouterModule.forChild(routes);

브 라 우 저 F12 를 열 고 js 의 로 딩 을 보면 페이지 로 딩 이 끝나 면 다른 모듈 의 js 를 미리 불 러 옵 니 다.

홈 페이지 에 PreloadAllModules 를 기본적으로 구현 하 는 홈 페이지 설명 을 참고 하 세 요.
구체 적 인 코드 는 나의 github 에서 찾 아 라https://github.com/332557712/cc
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.