快捷導(dǎo)航

Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件

更新時(shí)間：2022年05月16日 10:08:32 作者：Laggage's

這篇文章主要為大家介紹了Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

環(huán)境: Angular 13.x.x

angular中支持可以通過(guò)路由來(lái)懶加載某些頁(yè)面模塊已達(dá)到減少首屏尺寸, 提高首屏加載速度的目的. 但是這種通過(guò)路由的方式有時(shí)候是無(wú)法滿足需求的.

比如, 點(diǎn)擊一個(gè)按鈕后顯示一行工具欄, 這個(gè)工具欄組件我不希望它默認(rèn)打包進(jìn)main.js, 而是用戶點(diǎn)按鈕后動(dòng)態(tài)把組件加載并顯示出來(lái).

那為什么要?jiǎng)討B(tài)加載呢? 如果直接在目標(biāo)頁(yè)面組件引入工具欄組件, 那么工具欄組件中的代碼就會(huì)被打包進(jìn)目標(biāo)頁(yè)面組件所在的模塊, 這會(huì)導(dǎo)致目標(biāo)頁(yè)面組件所在的模塊生成的js體積變大; 通過(guò)動(dòng)態(tài)懶加載的方式, 可以讓工具欄組件只在用戶點(diǎn)了按鈕后再加載, 這樣就可以達(dá)到減少首屏尺寸的目的.

新建一個(gè)angular項(xiàng)目

為了演示, 新建一個(gè)angular項(xiàng)目, 然后再新建一個(gè)ToolbarModule, 項(xiàng)目的目錄結(jié)構(gòu)如圖

為了達(dá)到演示的目的, 我在ToolbarModule的html模板中放了個(gè)將近1m的base64圖片, 然后直接在AppModule中引用ToolbarModule, 然后執(zhí)行ng build, 執(zhí)行結(jié)果如圖

可以看到打包尺寸到達(dá)了1.42mb, 也就是說(shuō)用戶每次刷新這個(gè)頁(yè)面, 不管用戶有沒(méi)有點(diǎn)擊顯示工具欄按鈕, 工具欄組件相關(guān)的內(nèi)容都會(huì)被加載出來(lái), 這造成了資源的浪費(fèi), 所以下面將ToolbarModule從AppModule的imports聲明中移除, 然后在用戶點(diǎn)擊首次點(diǎn)擊顯示時(shí)懶加載工具欄組件.

懶加載工具欄組件

首先, 新建一個(gè)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;
    }
    img {
      width: 64px;
      height: 64px;
      object-fit: cover;
    }
    `,
    ],
})
export class ToolbarComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
}

toolbar.component.html

<div class="flex">
  <svg t="1652618923451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2104" width="200" height="200"><path d="M412 618m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2105"></path><path d="M673.19 393h-333a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM600.89 235H423.11C367.91 235 323 190.28 323 135.32v-12.5a25 25 0 0 1 50 0v12.5c0 27.39 22.48 49.68 50.11 49.68h177.78c27.63 0 50.11-22.29 50.11-49.68v-16.5a25 25 0 1 1 50 0v16.5c0 54.96-44.91 99.68-100.11 99.68zM673.19 585.5h-333a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM467 778H340a25 25 0 0 1 0-50h127a25 25 0 0 1 0 50z" fill="#087E6A" p-id="2106"></path><path d="M739.76 952H273.62a125.14 125.14 0 0 1-125-125V197a125.14 125.14 0 0 1 125-125h466.14a125.14 125.14 0 0 1 125 125v630a125.14 125.14 0 0 1-125 125zM273.62 122a75.08 75.08 0 0 0-75 75v630a75.08 75.08 0 0 0 75 75h466.14a75.08 75.08 0 0 0 75-75V197a75.08 75.08 0 0 0-75-75z" fill="#087E6A" p-id="2107"></path></svg>
  <svg t="1652618941842"
       class="icon"
       viewBox="0 0 1024 1024"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       p-id="2247"
       width="200"
       height="200">
    <path d="M415 624m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z"
          fill="#C9F4EB"
          p-id="2248"></path>
    <path d="M695 790H362a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM583 649H362a25 25 0 0 1 0-50h221a25 25 0 0 1 0 50zM262 287H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50zM262 455.33H129a25 25 0 1 1 0-50h133a25 25 0 0 1 0 50zM262 623.67H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50zM262 792H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50z"
          fill="#087E6A"
          p-id="2249"></path>
    <path d="M761.76 964H295.62a125.14 125.14 0 0 1-125-125V209a125.14 125.14 0 0 1 125-125h466.14a125.14 125.14 0 0 1 125 125v630a125.14 125.14 0 0 1-125 125zM295.62 134a75.09 75.09 0 0 0-75 75v630a75.08 75.08 0 0 0 75 75h466.14a75.08 75.08 0 0 0 75-75V209a75.09 75.09 0 0 0-75-75z"
          fill="#087E6A"
          p-id="2250"></path>
    <path d="M617 376H443a25 25 0 0 1 0-50h174a25 25 0 0 1 0 50z"
          fill="#087E6A"
          p-id="2251"></path>
    <path d="M530 463a25 25 0 0 1-25-25V264a25 25 0 0 1 50 0v174a25 25 0 0 1-25 25z"
          fill="#087E6A"
          p-id="2252"></path>
  </svg>
  <img src="<這里應(yīng)該是一張大小將近1M的base64圖片, 內(nèi)容較大, 就略去了...>" alt="">
</div>

然后再AppComponent的中按鈕點(diǎn)擊事件處理程序中寫加載工具欄模塊的代碼:

app.component.ts

import { Component, createNgModuleRef, Injector, ViewChild, ViewContainerRef } from '@angular/core';
@Component({
    selector: 'root',
    template: `
               <div class="container h-screen flex items-center flex-col w-100 justify-center">
                 <div class="mb-3"
                      [ngClass]="{ hidden: !isToolbarVisible }">
                   <ng-container #toolbar></ng-container>
                 </div>
                 <div>
                   <button (click)="toggleToolbarVisibility()"
                           class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">{{ isToolbarVisible ? '隱藏' : '顯示' }}</button>
                   <p class="mt-3">首屏內(nèi)容</p>
                 </div>
               </div>
             `,
})
export class AppComponent {
    title = 'ngx-lazy-load-demo';
    toolbarLoaded = false;
    isToolbarVisible = false;
    @ViewChild('toolbar', { 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('./toolbar/toolbar.module');
        const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
        const { injector } = moduleRef;
        const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
            injector,
            ngModuleRef: moduleRef,
        });
    }
}

關(guān)鍵在于其中的第32-42行, 首先通過(guò)一個(gè)動(dòng)態(tài)import導(dǎo)入toolbar.module.ts中的模塊, 然后調(diào)用createNgModuleRef并傳入當(dāng)前組件的Injector作為ToolbarModule的父級(jí)Injector, 這樣就實(shí)例化了ToolbarModule得到了moduleRef對(duì)象, 最后就是調(diào)用html模板中聲明的<ng-container #toolbar></ng-container>的ViewContainerRef對(duì)象的createComponent方法創(chuàng)建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,
    });
}

此時(shí)再來(lái)看下這番操作后執(zhí)行ng build打包的尺寸大小

可以看到首屏尺寸沒(méi)有開頭那么離譜了, 原因是沒(méi)有在AppModule和AppComponent直接導(dǎo)入ToolbarModule和ToolbarComponent,ToolbarModule被打進(jìn)了另外的js文件中(Lazy Chunk Files), 當(dāng)首次點(diǎn)擊顯示按鈕時(shí), 就會(huì)加載這個(gè)包含ToolbarModule的js文件

注意看下面的gif演示中, 首次點(diǎn)擊顯示按鈕, 瀏覽器網(wǎng)絡(luò)調(diào)試工具中會(huì)多出一個(gè)對(duì)src_app_toolbar_toolbar_module_ts.js文件的請(qǐng)求