각도 - 개별 구성 요소 로드 지연

규모를 고려한 각도의 응용 프로그램을 구축하는 것은 매우 까다롭다.우리는 패키지 크기를 줄이고 초기 불러오는 시간을 줄여서 사용자가 웹/응용 프로그램과 더욱 빨리 상호작용할 수 있도록 하는 데 익숙해졌다.
시간의 추이에 따라 우리의 웹 응용 프로그램은 점점 더 많은 일을 해야 할 것이다. 이것은 페이지의 불러오는 시간에 영향을 줄 것이다. 동적 변화 부분을 가진 대형 동적 폼을 구축할 때 이 점은 매우 뚜렷하다.
현재 폼에 필요한 구성 요소만 불러올 수 있다면, 모든 구성 요소를 한 번에 불러오는 것이 아니라, 불러오는 시간이 줄어들 뿐만 아니라, 클라이언트에게 불필요한 코드도 공개하지 않을 것입니다. (이것은 js 파일에 존재하지만 UI는 그것을 보여주지 않습니다.)
지금 우리는 이미 이러한 예와 몇 가지 좋은 점을 소개했는데, 이것은 어떻게 한 것입니까?Angular primary는 단순한 해결 방법 없이 프레임의 유효성을 확보하고 항상 구축의 질을 확보할 수 있는 매우 폐쇄적인 프레임입니다.
그러나 여전히 한 가지 방식, 한 가지 각도의 방식이 있다.

@Component({
    selector: 'app-parentMock',
    template: ``,

  })
export  class ParentComponent implements OnInit {
    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
    ) {}
}

ComponentFactoryResolver는 런타임 시 구성 요소를 생성하는 클래스입니다.그것은 약간의 이상한 행동을 했지만, 우리는 이 예를 계속합시다.

@Component({
    selector: 'app-parentMock',
    template: ``,

  })
export  class ParentComponent implements OnInit {

    demoObj = {
        demo: {
            load: () => import('../mock/mock.component')
        }
    }

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
    ) {}

    async ngOnInit(): Promise<void> {
        await this.loadComponent();
      }


      async loadComponent() {
          /** This saves loads the raw un-angular data into the loadFile */ 
          const loadFile: {default: any}  = await this.demoObj.demo.load(); 

      }

}

위 코드 세그먼트에서 보듯이 변수loadFile의 형식 {default:any}이 있는 구성 요소를 불러올 상대적인 경로를 포함하는 대상이 있습니다.이것은 처음에는 가치가 없었다.어셈블리에서 이러한 작업을 수행하려면 어셈블리 아래쪽(어셈블리 외부에 있지만)에서 로드를 지연하고 다음을 추가해야 합니다.

이게 굉장히 중요해요.

export default MockComponent 

지금은 까다로운 부분이니, 내가 상세하게 설명하겠다.

@Component({
    selector: 'app-parentMock',
    template: `
        <ng-template #lazyTab></ng-template>
    `,

  })
export  class ParentComponent implements OnInit {
    /** The html element we will be loading the component into */
    @ViewChild('lazyTab', {static: true}) lazyTab: ViewContainerRef;

    lazyLoadedCompoent: ComponentRef<any>;


    demoObj = {
        demo: {
            load: () => import('../mock/mock.component')
        }
    }

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private injector: Injector,

    ) {}

    async ngOnInit(): Promise<void> {
        await this.loadComponent();
      }


      async loadComponent() {
          /** This saves loads the raw un-angular data into the loadFile */ 
          const loadFile: {default: any}  = await this.demoObj.demo.load(); 

          /** This loads the Angular component into the the varibale for later use */
          const actualComponent = this.componentFactoryResolver.resolveComponentFactory(loadFile.default);


          const viewRef: ViewContainerRef = this.lazyTab.viewContainerRef;

          /** Clear any existing html inside of of the ng-container */
          viewRef.clear()

          /** We both insert the component in to the ref and save it for later use
           * 
           *  Adding the injector is to let it load other requiered things like services and other dependecies it might have
           */
          this.lazyLoadedCompoent = viewRef.createComponent<any>(actualComponent, null, this.injector)

      }

}

마지막 한 소절 보여주세요.
lazyTab(html에서): 템플릿 참조 변수입니다. 이 변수를 사용하여 angular이 lazyLoaded 구성 요소를 어디에 삽입하는지 알려 드리겠습니다.
@ViewChild('lazyTab'..: 템플릿 참조 변수를 사용하기 위해 typescript에 대한 접근을 제공합니다
loadFile: 생성된 원본 어셈블리를 저장하기 위해 생성된 변수
actualComponent: 우리가 실행할 때 만든 각도 구성 요소
현재 우리는 구성 요소를 불러왔습니다. 구성 요소에 입력이나 출력을 추가해서 전체 응용 프로그램과 동기화하기를 원할 수도 있습니다.
계속하기 전에 각도 변화 검측과 NgZone은 Angular의 모든 마법 중의 주요 흑마법에 대해 이야기할 필요가 있다고 생각합니다.
NgZone은 애플리케이션이 변화에 반응하고 자체 업데이트하도록 하는 도구입니다.어느 정도에 그것의 작업 범위는 유한하다.각도 범위 밖에서 작업하면 변경 사항이 감지되지 않으므로 UI 업데이트가 없습니다.

@Component({
    selector: 'app-parentMock',
    template: `
        <ng-template #lazyTab></ng-template>
    `,

  })
export  class ParentComponent implements OnInit {
    /** The html element we will be loading the component into */
    @ViewChild('lazyTab', {static: true}) lazyTab: ViewContainerRef;

    lazyLoadedCompoent: ComponentRef<any>;


    demoObj = {
        demo: {
            load: () => import('../mock/mock.component')
        }
    }

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private injector: Injector,
        private zone: NgZone,
    ) {}

    async ngOnInit(): Promise<void> {
        await this.loadComponent();
      }


      async loadComponent() {
          /** This saves loads the raw un-angular data into the loadFile */ 
          const loadFile: {default: any}  = await this.demoObj.demo.load(); 

          /** This loads the Angular component into the the varibale for later use */
          const actualComponent = this.componentFactoryResolver.resolveComponentFactory(loadFile.default);

          const viewRef: ViewContainerRef = this.lazyTab.viewContainerRef;

          /** Clear any existing html inside of of the ng-container */
          viewRef.clear()

          /** We both insert the component in to the ref and save it for later use
           * 
           *  Adding the injector is to let it load other requiered things like services and other dependecies it might have
           */
          this.lazyLoadedCompoent = viewRef.createComponent<any>(actualComponent, null, this.injector)

          /** To ensure the next changes are kept inside the Angular Zone Scope */
          this.zone.run(() => {
              this.lazyLoadedCompoent.instance['any-INPUT-you want'] = 'Lazy Loaded Component'
          })
      }
}

구역뛰다이 입력을 설정하거나 초기화할 때, 게으른 부하 구성 요소의 변화가 ngOnChanges를 실행하는 것을 감지합니다.
그럼 지금 출력은요?출력은 우리가 전달하는 함수인데 어떻게 실현합니까?

@Component({
    selector: 'app-parentMock',
    template: `
        <ng-template #lazyTab></ng-template>
    `,

  })
export  class ParentComponent implements OnInit {
    /** The html element we will be loading the component into */
    @ViewChild('lazyTab', {static: true}) lazyTab: ViewContainerRef;

    lazyLoadedCompoent: ComponentRef<any>;


    demoObj = {
        demo: {
            load: () => import('../mock/mock.component')
        }
    }

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private injector: Injector,
        private zone: NgZone,
    ) {}

    async ngOnInit(): Promise<void> {
        await this.loadComponent();
      }


      async loadComponent() {
          /** This saves loads the raw un-angular data into the loadFile */ 
          const loadFile: {default: any}  = await this.demoObj.demo.load(); 

          /** This loads the Angular component into the the varibale for later use */
          const actualComponent = this.componentFactoryResolver.resolveComponentFactory(loadFile.default);


          const viewRef: ViewContainerRef = this.lazyTab.viewContainerRef;

          /** Clear any existing html inside of of the ng-container */
          viewRef.clear()

          /** We both insert the component in to the ref and save it for later use
           * 
           *  Adding the injector is to let it load other requiered things like services and other dependecies it might have
           */
          this.lazyLoadedCompoent = viewRef.createComponent<any>(actualComponent, null, this.injector)

          /** To ensure the next changes are kept inside the Angular Zone Scope */
          this.zone.run(() => {
            /** INPUT */  
            this.lazyLoadedCompoent.instance['any-INPUT-you want'] = 'Lazy Loaded Component'

            /**  OUTPUT */
            this.lazyLoadedCompoent.instance['an-OUTPUT-type-of-new-Emitter'].subscribe((dataPassedByTheEmit: any) => {
                console.log(dataPassedByTheEmit);
                /** Do what ever you want wit it */
            })
        })
      }
}

그래서 출력은 Emitter 형식입니다. 이것은 우리가 그것을 구독하고 lazyLoaded 구성 요소에서 보내는 데이터를 얻을 수 있음을 의미합니다.
이것은 놀랍게도 프로그램이 실행될 때 불러오는 완전한 활성 구성 요소가 있습니다.
우리 먼저 결점을 이야기합시다

이것은 대량의 비용과 유지보수 가능한 코드를 작성하는 능력을 필요로 한다.

변경할 수 있는 많은 구성 요소에서 이 작업을 수행하려면 더 많은 비용이 필요하고 사용자가 구성 요소 사이를 변경할 때 업데이트를 유지하는 방법

이 필요합니다.

이것은 매우 각진 일하는 방식이 아니다

구성 요소는 모듈에 계속 로드됩니다.

묶음 크기 미감소

정면:

초대형 폼이나 페이지의 불러오는 시간을 줄인다.

로그인 사용자 유형에 따라 구성 요소를 불러오는 능력

서버

에서 구성 요소를 로드하려는 경우

A/B 테스트 실행

슈퍼쿨한 아이디어는 이미 생산 과정에서 테스트를 진행하여 매우 대규모의 응용에 사용되었다.

네가 이 작은 강좌를 좋아하길 바란다.
어떤 질문이나 평론에 대해서도 언제든지 평론을 발표해 주십시오. 저는 기꺼이 대답할 것입니다