官網鏈接

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

要惰性加載 Angular 模塊，請在 AppRoutingModule routes 中使用 loadChildren 代替 component 進行配置，代碼如下。

const routes: Routes = [{path: 'items',loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)} ];

在惰性加載模塊，也就是被 AppRoutingModule 加載的模塊，的路由模塊中，添加一個指向該組件的路由。

const routes: Routes = [{path: '',component: ItemsComponent} ];

還要確保從 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，內容如下：

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';@NgModule({imports: [CommonModule],declarations: [] }) export class CustomerDashboardModule { }

無論根模塊還是特性模塊，其 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 的信息修改這個特性模塊：

CustomerDashboardComponent 出現在了頂部的 JavaScript 導入列表里，并且被添加到了 declarations 數組中，它會讓 Angular 把新組件和這個特性模塊聯系起來。

導入特性模塊

要想把這個特性模塊包含進應用中，你還得讓根模塊 app.module.ts 知道它。要想把它導入到 AppModule 中，就把它加入 app.module.ts 的導入表中，即將其加入 imports 數組：

當 CLI 為這個特性模塊生成 CustomerDashboardComponent 時，還包含一個模板 customer-dashboard.component.html，它帶有如下頁面腳本：

<p>customer-dashboard works! </p>

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

然后，在 AppComponent 的 app.component.html 中，加入標簽 ：

2021-7-12 Monday

看一個例子：

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

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular Lazy load(延迟加载，惰性加载) 机制和 feature module 的学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。