모듈을 느리게 로드하고 Angular에서 해당 구성 요소를 동적으로 표시하는 방법에 대해 이야기해 보겠습니다.

어떻게 angular 모듈을 지연 로드하고 라우팅 없이 모듈에 선언된 구성 요소를 동적으로 생성할 수 있나요? 다음 글에서는 그 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

환경: Angular 13.x.x

Angular는 첫 번째 화면의 크기를 줄이고 첫 번째 화면의 로딩 속도를 향상시키기 위해 라우팅을 통해 특정 페이지 모듈의 지연 로딩을 지원합니다. 그러나 이러한 라우팅 방식은 때때로 수요를 충족시킬 수 없습니다. [관련 튜토리얼 추천: "angularjs 비디오 튜토리얼"]

예를 들어, 버튼을 클릭하면 일련의 툴바 구성요소가 main.js가 기본적으로 적용되지만 사용자가 버튼을 클릭하면 구성 요소가 동적으로 로드되어 표시됩니다. <code>main.js, 而是用户点按钮后动态把组件加载并显示出来.

那为什么要动态加载呢? 如果直接在目标页面组件引入工具栏组件, 那么工具栏组件中的代码就会被打包进目标页面组件所在的模块, 这会导致目标页面组件所在的模块生成的js体积变大; 通过动态懒加载的方式, 可以让工具栏组件只在用户点了按钮后再加载, 这样就可以达到减少首屏尺寸的目的.

为了演示, 新建一个angular项目, 然后再新建一个ToolbarModule, 项目的目录结构如图

为了达到演示的目的, 我在ToolbarModule的html模板中放了个将近1m的base64图片, 然后直接在AppModule中引用ToolbarModule, 然后执行ng build, 执行结果如图

可以看到打包尺寸到达了1.42mb, 也就是说用户每次刷新这个页面, 不管用户有没有点击显示工具栏按钮, 工具栏组件相关的内容都会被加载出来, 这造成了资源的浪费, 所以下面将ToolbarModule从AppModule的imports声明中移除, 然后在用户点击首次点击显示时懒加载工具栏组件.

懒加载工具栏组件

首先, 新建一个ToolbarModule和ToolbarComponent, 并在ToolbarModule声明ToolbarComponent

toolbar.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToolbarComponent } from './toolbar.component';
 
@NgModule({
    declarations: [ToolbarComponent],
    imports: [CommonModule],
    exports: [ToolbarComponent],
})
class ToolbarModule {}
 
export { ToolbarComponent, ToolbarModule };

toolbar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'toolbar',
    templateUrl: './toolbar.component.html',
    styles: [
        `
    svg {
      width: 64px;
      height: 64px;
    }
    모듈을 느리게 로드하고 Angular에서 해당 구성 요소를 동적으로 표시하는 방법에 대해 이야기해 보겠습니다. {
      width: 64px;
      height: 64px;
      object-fit: cover;
    }
    `,
    ],
})
export class ToolbarComponent implements OnInit {
    constructor() {}

    ngOnInit(): void {}
}

toolbar.component.html

<p>
  <svg><path></path><path></path><path></path></svg>
  <svg>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
  </svg>
  " alt="">
</p>

然后再AppComponent的中按钮点击事件处理程序中写加载工具栏模块的代码:

app.component.ts

import { Component, createNgModuleRef, Injector, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
    selector: 'root',
    template: `
               <p class="container h-screen flex items-center flex-col w-100 justify-center">
                 <p class="mb-3"
                      [ngClass]="{ hidden: !isToolbarVisible }">
                   <ng-container #toolbar></ng-container>
                 </p>
                 <p>
                   <button (click)="toggleToolbarVisibility()"
                           class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">{{ isToolbarVisible ? &#39;隐藏&#39; : &#39;显示&#39; }}</button>
                   <p class="mt-3">首屏内容</p>
                 </p>
               </p>
             `,
})
export class AppComponent {
    title = &#39;ngx-lazy-load-demo&#39;;
    toolbarLoaded = false;
    isToolbarVisible = false;
    @ViewChild(&#39;toolbar&#39;, { read: ViewContainerRef }) toolbarViewRef!: ViewContainerRef;

    constructor(private _injector: Injector) {}

    toggleToolbarVisibility() {
        this.isToolbarVisible = !this.isToolbarVisible;
        this.loadToolbarModule().then();
    }

    private async loadToolbarModule() {
        if (this.toolbarLoaded) return;
        this.toolbarLoaded = true;
        const { ToolbarModule, ToolbarComponent } = await import(&#39;./toolbar/toolbar.module&#39;);
        const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
        const { injector } = moduleRef;
        const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
            injector,
            ngModuleRef: moduleRef,
        });
    }
}

关键在于其中的第32-42行, 首先通过一个动态import导入toolbar.module.ts中的模块, 然后调用createNgModuleRef并传入当前组件的Injector作为ToolbarModule的父级Injector, 这样就实例化了ToolbarModule得到了moduleRef对象, 最后就是调用html模板中声明的<ng-container></ng-container>的ViewContainerRef对象的createComponent方法创建ToolbarComponent组件

private async loadToolbarModule() {
    if (this.toolbarLoaded) return;
    this.toolbarLoaded = true;
    const { ToolbarModule, ToolbarComponent } = await import('./toolbar/toolbar.module');
    const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
    const { injector } = moduleRef;
    const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
        injector,
        ngModuleRef: moduleRef,
    });
}

此时再来看下这番操作后执行ng build打包的尺寸大小

可以看到首屏尺寸没有开头那么离谱了, 原因是没有在AppModule和AppComponent直接导入ToolbarModule和ToolbarComponent, ToolbarModule被打进了另外的js文件中(Lazy Chunk Files), 当首次点击显示按钮时, 就会加载这个包含ToolbarModule的js文件

注意看下面的gif演示中, 首次点击显示按钮, 浏览器网络调试工具中会多出一个对src_app_toolbar_toolbar_module_ts.js

그러면 왜 도구 모음 구성 요소가 대상 페이지 구성 요소에 직접 도입되면 코드가 동적으로 로드되어야 합니까? 툴바 구성 요소는 대상 페이지 구성 요소가 있는 모듈에 패키징됩니다. 이로 인해 대상 페이지 구성 요소가 있는 모듈에서 생성된 js의 크기가 툴바 구성 요소인 동적 지연 로딩을 통해 커집니다. 사용자가 버튼을 클릭한 후에만 로드할 수 있으므로 첫 번째 화면의 크기가 줄어듭니다.

시연을 위해 새 각도 프로젝트를 만든 다음 새 ToolbarModule을 만듭니다. 프로젝트는 그림과 같습니다

시연을 위해 1m에 가까운 base64 이미지를 넣은 후 AppModule에서 ToolbarModule을 직접 참조한 후 ng build를 실행합니다. > 실행 결과는 그림과 같습니다

🎜🎜🎜패키징 크기가 1.42mb에 도달한 것을 확인할 수 있습니다. 이는 사용자가 도구 모음 표시 버튼을 클릭했는지 여부에 관계없이 사용자가 이 페이지를 새로 고칠 때마다 이 페이지를 새로 고칠 때마다 의미합니다. , 도구 모음 구성 요소와 관련된 콘텐츠가 로드되어 리소스 낭비가 발생하므로 다음은 AppModule의 <code>imports 선언에서 ToolbarModule이 제거됩니다. 를 적용한 다음 사용자가 첫 번째 클릭을 클릭하여 표시할 때 도구 모음 구성 요소를 지연 로드합니다.🎜

지연 로드 도구 모음 구성 요소

🎜먼저 새 ToolbarModule 및 ToolbarComponent를 선언하고 ToolbarModuleToolbarComponent🎜🎜🎜

toolbar.module.ts

rrreee

toolbar.comComponent.ts

rrreee

toolbar.comComponent.html

rrreee

🎜 그런 다음 AppComponent의 버튼 클릭 이벤트 핸들러에서 도구 모음 모듈을 로드하는 코드를 작성합니다.🎜

app.comComponent.ts

rrreee 🎜핵심은 32~42번째 줄에 있습니다. 먼저, toolsbar.module.ts의 동적 import 모듈을 통해 를 가져온 다음 <code>createNgModuleRef를 호출하세요. 현재 구성 요소의 Injector를 ToolbarModuleInjector의 상위 요소로 전달하여 ToolbarModule을 인스턴스화하고 moduleRef 객체, 그리고 마지막으로 html 템플릿에 선언된 <ng-container>ViewContainerRef</ng-container> 객체의 createComponent 메소드 ;는 ToolbarComponent 컴포넌트를 생성합니다🎜rrreee🎜 이번에 살펴보겠습니다. 이 작업을 수행한 후 ng build를 실행하여 패키지합니다. 크기 🎜🎜🎜🎜할 수 있습니다 첫 번째 화면 크기가 처음만큼 크지는 않은지 확인하세요. 그 이유는 ToolbarModule을 가져온 후 <code>AppModule과 AppComponent 사이에 직접적인 링크가 없기 때문입니다. 및 ToolbarComponent, ToolbarModule을 다른 js 파일(Lazy Chunk Files)로 가져옵니다. 를 처음 클릭하면 버튼이 나타납니다. , ToolbarModule이 포함된 js 파일이 로드됩니다🎜🎜아래 gif 데모를 보시고 처음으로 브라우저 네트워크 디버깅 도구에서 Show 버튼을 클릭하세요. src_app_toolbar_toolbar_module_ts.js 파일을 한 번 더 요청해 주세요🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 모듈을 느리게 로드하고 Angular에서 해당 구성 요소를 동적으로 표시하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!