Angular是一個由谷歌開發的前端JavaScript框架，用於構建可擴充套件的企業級網路應用。其中一些應用程式會變得相當大，影響你的應用程式的載入時間。
為了減少載入時間，改善使用者的整體體驗，你可以使用一種被稱為懶人載入的技術。這個原生的Angular功能允許你只先載入網路應用的所需部分，然後根據需要載入其他模組。
在這篇文章中，你將瞭解Angular懶載入以及它如何幫助加快你的Angular網路應用。
什麼是懶載入？
懶載入是指只在需要時才載入網頁元素的技術。與之相對應的是急於載入，當所有東西都載入–或試圖載入–的時候。急切地獲取所有影象、視訊、CSS和JavaScript程式碼可能意味著漫長的載入時間，這對使用者來說是個壞訊息。
懶載入通常用於承載大量內容的網站上的影象和視訊。與其一次性載入所有媒體（這將使用大量頻寬並阻礙頁面瀏覽），不如在這些元素在頁面上的位置即將滾動進入視野時再載入它們。
Angular是一個單頁應用框架，它的大部分功能依賴於JavaScript。隨著應用程式的增長，你的應用程式的JavaScript集合很容易變得很大，這也伴隨著資料使用和載入時間的相應增加。為了加快速度，你可以使用懶載入來首先獲取所需的模組，並將其他模組的載入推遲到需要時進行。
Angular中懶載入的好處
懶載入提供了一些好處，將使你的網站更加使用者友好。這些包括：
- 更快的載入時間： JavaScript包含顯示你的頁面和載入其資料的指令。正因為如此，它是一種阻礙渲染的資源。這意味著在渲染你的頁面之前，瀏覽器必須等待載入所有的JavaScript。在Angular中進行懶載入時，JavaScript被分割成若干塊，分別載入。最初的塊只包含頁面的
- 主要模組所需的邏輯：它被急切地載入，然後其餘的模組被懶散地載入。通過減少初始塊的大小，你將使網站的載入和渲染速度更快。
- 更少的資料使用： 通過將資料分成幾塊並根據需要載入，你可能會使用更少的頻寬。
- 節約瀏覽器資源：由於瀏覽器只載入需要的資料塊，它不會浪費記憶體和CPU來解釋和渲染不需要的程式碼。
在Angular中實施懶載入
要跟上本教學，你將需要以下東西：
- 安裝NodeJS
- 具備Angular的基本知識
提升你的專案
你將使用Angular CLI來建立你的專案。你可以通過執行以下命令用npm來安裝CLI：
npm install -g @angular/cli
之後，像這樣建立一個名為Lazy Loading Demo的專案：
ng new lazy-loading-demo --routing
該命令建立了一個新的Angular專案，並配有路由。你將只在 src/app 資料夾中工作，該資料夾包含你的應用程式的程式碼。這個資料夾包含你的主要路由檔案，app-routing.module.ts。該資料夾的結構應該是這樣的：
Angular專案的資料夾結構
用路由建立一個功能模組
接下來，你將建立一個功能模組，它將懶散地載入。要建立這個模組，請執行這個命令：
ng generate module blog --route blog --module app.module
這個命令建立了一個名為 BlogModule 的模組，同時還建立了routing。如果你開啟 src/app/app-routing.module.ts，你會看到它現在看起來像這樣：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
對懶載入很重要的部分是第三行：
const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];
這一行定義了路由。部落格的路由使用 loadChildren 引數而不是 component。loadChildren 引數告訴Angular懶惰地載入路由–只有當路由被訪問時才動態地匯入模組，然後再將其返回給路由器。模組在其 routing.module.ts 檔案中定義了自己的子路由，如 blog/**。你生成的部落格模組看起來像這樣：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogComponent } from './blog.component';
const routes: Routes = [{ path: '', component: BlogComponent }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BlogRoutingModule { }
你會注意到，這個路由檔案包含一個單一的路由， ''。這是對 /blog 的解析，指向BlogComponent。你可以在這個檔案中新增更多的元件並定義這些路由。
例如，如果你想新增一個元件來獲取某篇部落格文章的細節，你可以用這個命令建立這個元件：
ng generate component blog/detail
這就生成了部落格細節的元件，並將其新增到部落格模組中。要為它新增一個路由，你可以簡單地把它新增到你的路由陣列中：
const routes: Routes = [{ path: '', component: BlogComponent },
{path:"/:title",component: DetailComponent}];
這增加了一個路由，可解析為 blog/:title（例如，blog/angular-tutorial）。這個路由陣列是懶載入的，不包括在初始捆綁中。
驗證懶載入
你可以通過執行 ng serve 並觀察輸出結果來輕鬆檢查懶載入是否正常。在輸出的底部，你應該得到類似這樣的東西：
使用Angular的 ng serve 驗證懶載入
上面的輸出被分為兩部分。Initial Chunk Files 是頁面第一次載入時載入的檔案。 Lazy Chunk Files 是懶得載入的檔案。這個例子中列出了部落格模組。
通過瀏覽器網路日誌檢查懶載入的情況
另一種確認懶載入的方法是使用瀏覽器 “開發工具”面板中的Network選項卡。(在Windows上，Chrome和Microsoft Edge中是F12，Firefox中是Ctrl-Shift-I。在Mac上，在Chrome、Firefox和Safari中是Command–Option–I）。
選擇 JS 過濾器，只檢視通過網路載入的JavaScript檔案。在應用程式的初始載入之後，你應該得到類似這樣的東西：
在開發工具中檢視的JavaScript下載的初始日誌
當你導航到 /blog 時，你會注意到一個新的塊，src_app_blog_blog_module_ts.js，被載入。這意味著你的模組只有在你導航到該路線時才被請求，而且它被懶散地載入。網路日誌看起來應該是這樣的：
開發者工具記錄的下載中出現了懶載入的模組
懶載入與急載入
為了比較，讓我們也建立一個急於載入的模組，看看它是如何影響檔案大小和載入時間的。為了證明這一點，你將建立一個用於認證的模組。這樣的模組可能需要急於載入，因為認證是你可能要求所有使用者做的事情。
通過在CLI中執行這個命令，生成一個AuthModule：
ng generate module auth --routing --module app.module
這就生成了模組和一個路由檔案。它還將模組新增到 app.module.ts 檔案中。然而，與我們上次用來生成模組的命令不同，這條命令並沒有新增一個懶惰的路由。它使用 --routing 引數而不是 --route <name>。這將認證模組新增到 app.module.ts 的 imports 陣列中：
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AuthModule //added auth module
],
providers: [],
bootstrap: [AppComponent]
})
將AuthModule新增到你的AppModule匯入陣列中，意味著認證模組被新增到初始的chunk檔案中，並將與主JavaScript捆綁在一起。為了驗證這一點，你可以再次執行 ng serve 並觀察輸出：
新增認證模組後Angular的 ng serve 命令的輸出
正如你所看到的，認證模組沒有作為懶惰塊檔案的一部分被包含。此外，初始捆綁檔案的大小也增加了。 main.js檔案的大小几乎增加了一倍，從8 KB增加到15 KB。在這個例子中，增加的幅度很小，因為元件不包含很多程式碼。但是，當你用邏輯填充元件時，這個檔案的大小會增加，為懶載入提供了強有力的理由。
小結
你已經學會了如何在Angular中使用懶載入，只在需要時才獲取模組。懶載入是一種很好的技術，可以改善載入時間，減少資料使用，並更好地利用你的前端和後端資源。
懶載入，加上內容分發網路和最小化JavaScript等技術，將提高你的網站效能和使用者的滿意度。
評論留言