什么是懒加载?
Angular 项目通常需要很多的模块和组件, 然而, 当用户访问你的应用程序时, 并不需要所有的模块和组件. 懒加载是指在需要的时候去加载模块或组件.
为什么要使用懒加载?
懒加载可以优化应用程序的加载性能, 减轻首次加载的负担. 首次加载的时间越短, 用户的满意度就越高. 随着项目的扩大, 懒加载也可以方便地管理代码, 提高可维护性.
如何使用懒加载
路由懒加载
路由懒加载是指应用程序根据路由配置延迟加载模块. 当用户访问路由时, 才会去加载该路由的模块.
示例
----- ------- ------ - -
- ----- --- ----------- -------- ---------- ------ --
- ----- ------- ---------- ------------- --
-
----- -------
------------- -- -- ----------------------------------- -- -------------
-
--以上代码我们定义了两个路由, /home 和 /user. home 组件被普通加载方式加载, user 组件通过 loadChildren 实现懒加载.
工作原理
当访问 /home 路由时, HomeComponent 组件会被加载并渲染, 而不加载 UserModule. 而当我们访问 /user 路由时才会去加载 UserModule 模块.
如果我们在 UserModule 中定义了自己的路由表, 并且使用了懒加载加载子模块, 子模块也会被延迟加载.
组件懒加载
组件懒加载是指在某个组件展示之前, 仅仅加载该组件的代码.
示例
------------
--------- --------------
--------- ----- --------------------- ------------------------
------- --
--
------ ----- ---------------- ---------- ------ -
-------- ----
------------------- ------- ------- - -
---------- - -
----- ----------- -
----- - --------------------- - - ----- --------------------------------------------------
----- ----- - ----- --------------------------------------------- -
----- - --- ---- ----- ------ -
---
------------ - -------------
-
-以上代码我们定义了一个 ProductComponent 组件, 在使用 openModal 方法时, 使用懒加载的方式加载 ProductModalComponent 组件.
工作原理
当用户访问 ProductComponent 组件时, 只有 ProductComponent 组件的代码会被加载. 当用户使用 openModal 方法时才会去加载 ProductModalComponent 组件.
总结
懒加载可以提高应用程序的性能和可维护性, 在大型项目中尤为重要. 我们可以使用路由和组件两种方式实现懒加载, 根据不同的需求去选择适当的方式.
参考
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65bae9dcadd4f0e0ff37ac73