天天看點

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

預設情況下,NgModules 是貪婪加載的,這意味着一旦應用程式加載,所有 NgModules 也會加載,無論它們是否立即需要。 對于有很多路由的大型應用程式,可以考慮延遲加載——一種根據需要加載 NgModules 的設計模式。 延遲加載有助于保持較小的初始包大小,進而有助于減少加載時間。

要惰性加載 Angular 子產品,請在 AppRoutingModule routes 中使用 loadChildren 代替 component 進行配置,代碼如下。

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

在惰性加載子產品,也就是被 AppRoutingModule 加載的子產品,的路由子產品中,添加一個指向該元件的路由。

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

還要確定從 AppModule 中移除了 ItemsModule。這一步很關鍵,即 AppModule 中不能出現 import ItemsModule 的語句。否則最後 ItemsModule 會和 AppModule 打包在同一個 chunk 裡。

Feature Module

特性子產品是用來對代碼進行組織的子產品。

随着應用的增長,你可能需要組織與特定應用有關的代碼。 這将幫你把特性劃出清晰的邊界。使用特性子產品,你可以把與特定的功能或特性有關的代碼從其它代碼中分離出來。 為應用勾勒出清晰的邊界,有助于開發人員之間、小組之間的協作,有助于分離各個指令,并幫助管理根子產品的大小。

特性子產品 vs. 根子產品

與核心的 Angular API 的概念相反,特性子產品是最佳的組織方式。特性子產品提供了聚焦于特定應用需求的一組功能,比如使用者工作流、路由或表單。 雖然你也可以用根子產品做完所有事情,不過特性子產品可以幫助你把應用劃分成一些聚焦的功能區。特性子產品通過它提供的服務以及共享出的元件、指令和管道來與根子產品和其它子產品合作。

建立 feature module 的指令行:

ng generate module CustomerDashboard

這會讓 CLI 建立一個名叫 customer-dashboard 的檔案夾,其中有一個名叫 customer-dashboard.module.ts,内容如下:

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

無論根子產品還是特性子產品,其 NgModule 結構都是一樣的。在 CLI 生成的特性子產品中,在檔案頂部有兩個 JavaScript 的導入語句:第一個導入了 NgModule,它像根子產品中一樣讓你能使用 @NgModule 裝飾器;第二個導入了 CommonModule,它提供了很多像 ngIf 和 ngFor 這樣的常用指令。 特性子產品導入 CommonModule,而不是 BrowserModule,後者隻應該在根子產品中導入一次。 CommonModule 隻包含常用指令的資訊,比如 ngIf 和 ngFor,它們在大多數模闆中都要用到,而 BrowserModule 為浏覽器所做的應用配置隻會使用一次。

declarations 數組讓你能添加專屬于這個子產品的可聲明對象(元件、指令和管道)。 要添加元件,就在指令行中輸入如下指令,這裡的 customer-dashboard 是一個目錄,CLI 會把特性子產品生成在這裡,而 CustomerDashboard 就是該元件的名字:

ng generate component customer-dashboard/CustomerDashboard

這會在 customer-dashboard 中為新元件生成一個目錄,并使用 CustomerDashboardComponent 的資訊修改這個特性子產品:

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

CustomerDashboardComponent 出現在了頂部的 JavaScript 導入清單裡,并且被添加到了 declarations 數組中,它會讓 Angular 把新元件和這個特性子產品聯系起來。

導入特性子產品

要想把這個特性子產品包含進應用中,你還得讓根子產品 app.module.ts 知道它。要想把它導入到 AppModule 中,就把它加入 app.module.ts 的導入表中,即将其加入 imports 數組:

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

當 CLI 為這個特性子產品生成 CustomerDashboardComponent 時,還包含一個模闆 customer-dashboard.component.html,它帶有如下頁面腳本:

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

要想在 AppComponent 中檢視這些 HTML,你首先要在 CustomerDashboardModule 中導出 CustomerDashboardComponent。 在 customer-dashboard.module.ts 中,declarations 數組的緊下方,加入一個包含 CustomerDashboardModule 的 exports 數組:

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

然後,在 AppComponent 的 app.component.html 中,加入标簽 :

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

2021-7-12 Monday

看一個例子:

CustomerMainModule 是 eager load,在其實作代碼裡引用了 ProductModule,後者本意是期望Lazy Load,但是這種代碼裡靜态 import 方式,破壞了 ProductModule 的懶加載,最終兩個 module 會被打包在一起,出現在一個 chunk 裡。

Angular Lazy load(延遲加載,惰性加載) 機制和 feature module 的學習筆記

繼續閱讀