什么是懒加载?
Angular 项目通常需要很多的模块和组件, 然而, 当用户访问你的应用程序时, 并不需要所有的模块和组件. 懒加载是指在需要的时候去加载模块或组件.
为什么要使用懒加载?
懒加载可以优化应用程序的加载性能, 减轻首次加载的负担. 首次加载的时间越短, 用户的满意度就越高. 随着项目的扩大, 懒加载也可以方便地管理代码, 提高可维护性.
如何使用懒加载
路由懒加载
路由懒加载是指应用程序根据路由配置延迟加载模块. 当用户访问路由时, 才会去加载该路由的模块.
示例
const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) } ];
以上代码我们定义了两个路由, /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
