Angular懶加載動態(tài)創(chuàng)建顯示該模塊下聲明的組件
環(huán)境: Angular 13.x.x
angular中支持可以通過路由來懶加載某些頁面模塊已達到減少首屏尺寸, 提高首屏加載速度的目的. 但是這種通過路由的方式有時候是無法滿足需求的.
比如, 點擊一個按鈕后顯示一行工具欄, 這個工具欄組件我不希望它默認打包進main.js, 而是用戶點按鈕后動態(tài)把組件加載并顯示出來.
那為什么要動態(tài)加載呢? 如果直接在目標頁面組件引入工具欄組件, 那么工具欄組件中的代碼就會被打包進目標頁面組件所在的模塊, 這會導致目標頁面組件所在的模塊生成的js體積變大; 通過動態(tài)懶加載的方式, 可以讓工具欄組件只在用戶點了按鈕后再加載, 這樣就可以達到減少首屏尺寸的目的.
新建一個angular項目
為了演示, 新建一個angular項目, 然后再新建一個ToolbarModule, 項目的目錄結構如圖
為了達到演示的目的, 我在ToolbarModule的html模板中放了個將近1m的base64圖片, 然后直接在AppModule中引用ToolbarModule, 然后執(zhí)行ng build, 執(zhí)行結果如圖
可以看到打包尺寸到達了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;
}
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="<這里應該是一張大小將近1M的base64圖片, 內容較大, 就略去了...>" alt="">
</div>
然后再AppComponent的中按鈕點擊事件處理程序中寫加載工具欄模塊的代碼:
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">首屏內容</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,
});
}
}
關鍵在于其中的第32-42行, 首先通過一個動態(tài)import導入toolbar.module.ts中的模塊, 然后調用createNgModuleRef并傳入當前組件的Injector作為ToolbarModule的父級Injector, 這樣就實例化了ToolbarModule得到了moduleRef對象, 最后就是調用html模板中聲明的<ng-container #toolbar></ng-container>的ViewContainerRef對象的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,
});
}
此時再來看下這番操作后執(zhí)行ng build打包的尺寸大小
可以看到首屏尺寸沒有開頭那么離譜了, 原因是沒有在AppModule和AppComponent直接導入ToolbarModule和ToolbarComponent,ToolbarModule被打進了另外的js文件中(Lazy Chunk Files), 當首次點擊顯示按鈕時, 就會加載這個包含ToolbarModule的js文件
注意看下面的gif演示中, 首次點擊顯示按鈕, 瀏覽器網絡調試工具中會多出一個對src_app_toolbar_toolbar_module_ts.js文件的請求
以上就是Angular懶加載動態(tài)創(chuàng)建顯示該模塊下聲明的組件的詳細內容，更多關于Angular懶加載動態(tài)聲明組件的資料請關注腳本之家其它相關文章！
相關文章
Angular+ionic實現(xiàn)折疊展開效果的示例代碼
這篇文章主要介紹了Angular+ionic實現(xiàn)折疊展開效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
詳解Angular調試技巧之報錯404(not found)
本篇文章主要介紹了詳解Angular調試技巧之報錯404(not found)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本篇文章主要介紹了Angularjs中使用layDate日期控件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了Angular腳手架開發(fā)的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例
下面小編就為大家分享一篇angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
之前因為項目的需求，第一次系統(tǒng)的使用了angular這一優(yōu)秀的js框架，其所擁有的許多優(yōu)秀特性極大的方便了項目的開發(fā)，然而在開發(fā)中也遇到過不少的問題，趁著最近有時間給大家總結一下，這篇文章將會介紹使用angularjs1結合百度的圖表插件echart作為例子用以演示。2016-10-10
這篇文章主要介紹了Angular4.0動畫操作,結合實例形式詳細分析了Angular4.0動畫的原理、定義及使用等相關操作技巧,需要的朋友可以參考下2019-05-05
angular + express 實現(xiàn)websocket通信
最近需要實現(xiàn)一個功能,后端通過TCP協(xié)議連接雷達硬件的控制器,前端通過websocket連接后端,當控制器觸發(fā)消息的時候,把信息通知給所以前端,本文給的大家講解angular + express 實現(xiàn)websocket通信的思路,感興趣的朋友一起看看吧2023-09-09
跨域，前端開發(fā)中經常遇到的問題，下面這篇文章主要給大家介紹了關于angular.js中解決跨域問題的三種方式，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07
AngularJS的ng Http Request與response格式轉換方法
這篇文章主要介紹了AngularJS的ng Http Request與response格式轉換方法,結合實例形式分析了AngularJS實現(xiàn)Request與response格式轉換操作的相關設置與使用技巧,需要的朋友可以參考下2016-11-11