在 Angular 中實現延遲載入
本教程將討論 Angular 中延遲載入的用法以及如何實現它。
延遲載入是延遲載入網頁資源的過程。這種技術通常用於具有大量資料或影象的網頁，而不是頂層。
Angular 延遲載入有助於僅載入給定頁面所需的資源。這會減少初始下載大小並通過減少網路請求來提高應用程式的效能。
它可以使用 Angular 內建的延遲載入模組或外部模組（例如 Angular Universal Lazy Load Module）來實現，該模組依賴於 Webpack 進行配置和構建。
Angular 中延遲載入的使用
延遲載入最常見的用例是從 API 載入資料，但你不想獲取所有資料。如果你的應用程式只有一個沒有路由的檢視，它將無法工作。
延遲載入可確保在首次部署應用程式時僅載入和使用基本模組。這有利於應用程式的效能，因為它減少了載入時間，從而為終端使用者提供了更具響應性的應用程式。
載入所有模組需要一些時間，所以它的作用是在使用者第一次訪問頁面時僅載入幾個模組，然後根據需要載入更多模組。
讓我們討論一些 Angular 延遲載入用例。
- 將非關鍵指令碼和樣式表推遲到需要時；
- 電子商務網站上面向供應商和麵向客戶的螢幕可能被分成不同的模組。你也可以自行構建支付模組。
- 僅按需載入指令碼和樣式表。
在 Angular 中實現延遲載入
在 Angular 中實現延遲載入是一個非常簡單的過程。我們必須新增正確的模組並設定我們的路由。
第一步是為延遲載入新增必要的模組。我們通過從 @angular/router 匯入 LazyModule 並將其新增到應用程式模組的 NgModule 裝飾器中的匯入陣列來實現此目的。
然後，我們必須配置我們的路由來指定哪些模組應該按需載入或延遲載入。我們新增一條帶有 loadChildren: 'lazy-loaded-child-routes' 的新路由作為屬性或修改現有路由。
例子：
TypeScript 程式碼（app.component.ts）：
import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
@Component({
selector: 'app-home',
template: '<h3>Home Active!!!</h3>',
})
export class AppadComponent {}
const routes: Routes = [
{ path: 'Home', component: AppadComponent },
{ path: 'About', loadChildren: './lazy-loading.module#SecondModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class RootRoutingModule { }
TypeScript 程式碼（lazy-loading.modules.ts）：
import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
selector: 'app-about',
template: '<h3>About Active!!!</h3>',
})
export class MyComponent {}
const routes: Routes = [
{ path: '', component: MyComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class RootRoutingModule { }
@NgModule({
imports: [ RootRoutingModule ],
declarations: [ MyComponent ]
})
export class SecondModule { }
HTML 程式碼（app.component.html）：
<h2> Example of Angular Lazy Loading</h2>
<a routerLink='Home'>Home</a>
<br>
<a routerLink='About'>About</a>
<router-outlet></router-outlet>
點選這裡檢查上面程式碼的工作情況。
如果可能，請避免使用者經常訪問的延遲載入路徑。儘可能減小塊的大小。
此外，當檢索到延遲載入的路由時，使用路由狀態來顯示載入器或動畫，以便你的使用者不會認為你的應用程式滯後。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook