在现代 Web 应用程序中，性能是一个至关重要的因素。当一个应用程序变得越来越大时，加载时间也会变得越来越长，这会影响用户的体验。但是，Angular 提供了一种有效的解决方案，使应用程序的性能得到提升，这就是 Lazy Loading。
Lazy Loading 是一种技术，它可以在需要时动态地加载应用程序的模块。这种技术可以大大减少应用程序的启动时间，因为它只会加载当前需要的模块，而不是一次性加载所有模块。在 Angular 中实现 Lazy Loading 并不难，只需要遵循以下几个步骤：
第一步：设置路由
要使用 Lazy Loading，首先需要在应用程序中设置路由。在 Angular 中，路由可以通过 RouterModule 来设置。在设置路由时，需要使用 loadChildren 属性来加载模块。loadChildren 属性指向一个模块文件的路径，该模块包含要加载的组件。
以下是一个示例路由设置：
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' }
];在上面的示例中，当用户访问 '/lazy' 路径时，Angular 会加载 LazyModule。
第二步：创建模块
要使用 Lazy Loading，需要创建一个模块，该模块包含要加载的组件。在创建模块时，需要使用 @NgModule 装饰器，并将组件添加到 declarations 数组中。还需要将组件添加到 exports 数组中，以便在其他模块中使用。
以下是一个示例模块设置：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
-----------
------------- ----------------
-------- -
-------------
-----------------------
- ----- --- ---------- ------------- -
--
--
-------- ---------------
--
------ ----- ---------- - -在上面的示例中，LazyModule 包含一个名为 LazyComponent 的组件，并将其添加到 declarations 和 exports 数组中。还使用了 @NgModule 装饰器来设置模块。
第三步：使用模块
最后，需要使用模块来加载组件。在应用程序中，可以使用 routerLink 指令来加载组件。routerLink 指令可以用来设置路由链接，以便在用户单击链接时加载组件。
以下是一个示例使用模块的代码：
<a routerLink="/lazy">Lazy Component</a>
在上面的示例中，当用户单击 'Lazy Component' 链接时，Angular 会加载 LazyComponent 组件。
总结
在本文中，我们讨论了如何在 Angular 中实现 Lazy Loading。Lazy Loading 是一种有效的技术，可以提高应用程序的性能。要使用 Lazy Loading，需要设置路由、创建模块并使用模块来加载组件。希望本文能够帮助你更好地理解 Lazy Loading，并在你的应用程序中使用它来提高性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/668f4130dc1ed1a61b37a42c