懒加载是指按需加载模块或组件，而不是一次性加载全部的资源。懒加载能够帮助我们加速应用程序的启动时间，降低应用的初始加载时间，从而提高用户体验。在 Angular 应用程序中实现懒加载非常简单，本文将介绍如何使用 Angular 内置的懒加载机制。
懒加载的优势
- 减少应用程序的起始加载时间，用户体验更佳
- 程序应用采用惰性的方法导致某些加载请求不只在启动的时候，可以缩小应用文件体积，减少网络带宽消耗，更好的进行应用程序优化
- 根据用户的需求来按需加载模块，避免整体页面重刷，具备更好的交互性和响应性能力
使用 Angular 内置的懒加载机制
步骤一：生成模块
首先，我们为要懒加载的模块生成一个新的模块文件：
ng generate module features/my-feature --route my-feature --module app.module
步骤二：更新路由
我们需要到 app-routing.module.ts 中配置定义路径和要懒加载的模块，然后在 loadChildren 属性中指定模块的路径。下面是一个简单的路由配置实现懒加载:
-- -------------------- ---- ------- -- ----------------------------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ----------------- - ---- ---------------------------------- ----- ------- ------ - - - ----- --- ---------- ----------------- -- - ----- ------------- ------------- --------------------------------------------------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
步骤三：实现懒加载
在导航到 /my-feature 路径时，Angular 将加载 MyFeatureModule 模块。懒加载就是在按需请求时进行加载：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------------------- - ---- ------------------------------
------ - ------------------ - ---- -------------------------
-----------
-------- -
-------------
----------------------
--
------------- -
------------------
-
--
------ ----- --------------- - -
-- ---------------------------------------------------
------ - --------- - ---- ----------------
------------
--------- -----------------
--------- ------- -------------
--
------ ----- ------------------ - -步骤四：根据需要配置预加载或者不预加载
在非懒加载的加载情况下，当构建应用程序之后，在一个下载程序包的过程中，Angular CLI 将 min-length-chunk-size 用于阈值，如果一个模块达到阈值大小，就将该模块拆分成两个文件。Angular CLI 只会自行拆分未被引用的模块。Angular CLI 仅仅根据导航意向自动预加载模块。
我们可以在根模块中添加以下代码来使用预加载:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------- ----------------- - ---- ------------------ ------ - ----------------- - ---- ---------------------------------- ----- ------- ------ - - - ----- --- ---------- ----------------- -- - ----- ------------- ------------- ---------------------------------------------------------- ----- - -------- ---- - -- -- ----------- -------- ----------------------------- - ------------------- ----------------- ---- -------- -------------- -- ------ ----- ---------------- - -
如果想防止皮质空闲内容的预加载，我们可以将策略从PreloadAllModules更改为NoPreloading。如下所示:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------- ------------ - ---- ------------------ ------ - ----------------- - ---- ---------------------------------- ----- ------- ------ - - - ----- --- ---------- ----------------- -- - ----- ------------- ------------- ---------------------------------------------------------- ----- - -------- ---- - -- -- ----------- -------- ----------------------------- - ------------------- ------------ ---- -------- -------------- -- ------ ----- ---------------- - -
结论
懒加载是帮助我们优化 Angular 应用程序性能和用户体验的便利方法。通过使用 Angular 内置的懒加载机制，我们可以按需加载模块和组件，从而减少冗余的加载并提高应用程序的启动速度。为了提高应用的性能和用户体验，我们建议您在项目中使用懒加载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677156216d66e0f9aacda669