手把手教你提高angular项目的加载&响应速度，angular懒加载+预加载多模块处理 |
您所在的位置：网站首页 › angular数据请求渲染 › 手把手教你提高angular项目的加载&响应速度，angular懒加载+预加载多模块处理 |
手把手教你提高angular项目的加载&响应速度，angular懒加载+预加载多模块处理
|
懒加载：初始化只加载需要的组件，其他组件等到使用的时候，再去动态加载 预加载：在加载好需要的组件后，继续加载其他的模块组件，等需要用到其他模块组件时，无需再临时加载组件，从而最大程度提高了系统响应速度，弥补了懒加载机制的不足 本次讲解以实际的物流系统作为案例 1、根据物流项目的实际业务可划分为不同的模块，为基础模块、订单模块、运输模块、仓储模块 2、创建自定义模块，统一放到module目录下： #生成基础模块&模块路由 ng g module module/basic --routing #生成基础模块的根组件 ng g component module/basic #生成订单模块&模块路由 ng g module module/orders --routing #生成订单模块的根组件 ng g component module/orders #创建运输模块&模块路由 ng g module module/transport --routing #生成运输模块的根组件 ng g component module/transport #创建仓储模块&模块路由 ng g module module/storage --routing #生成仓储模块的根组件 ng g component module/storage3、配置基础、订单、运输、仓储子模块的路由 说明：这里为了演示，只简单的配置自定义模块的根组件，实际业务可以根据实际情况定义更多该模块的路由组件 #基础模块的路由配置basic-routing.module.ts const routes: Routes = [ {path:'',component:BasicComponent} ]; #订单模块的路由配置order-routing.module.ts const routes: Routes = [ {path:'',component:OrderComponent} ]; #运输模块的路由配置transport-routing.module.ts const routes: Routes = [ {path:'',component:TransportComponent} ]; #仓储模块的路由配置storage-routing.module.ts const routes: Routes = [ {path:'',component:StroageComponent} ];
3、配置项目根组件【app-routing.module.ts】的路由，实现模块懒加载 注意坑：举例说明此坑， loadChildren: () => import('./module/basic/basic.module').then(m => m.BasicModule)，一定注意不要导入BasicModule模块类了，不然懒加载不会生效，其他模块也一样！！！ #根模块路由配置 const routes: Routes = [ { path: 'basic', loadChildren: () => import('./module/basic/basic.module').then(m => m.BasicModule) }, { path: 'order', loadChildren: () => import('./module/order/order.module').then(m => m.OrderModule) }, { path: 'transport', loadChildren: () => import('./module/transport/transport.module').then(m => m.TransportModule) }, { path: 'storage', loadChildren: () => import('./module/storage/storage.module').then(m => m.StorageModule) }{ path: 'taskPane', component: TaskPaneComponent, data: { title: '任务面板' } }, { path: '**', redirectTo: 'home/taskPane' } ];路由懒加载说明，以下面路由为例解释说明： 1、进入项目根目录后，会加载到/home/taskPane 任务面板，这个任务面板是根模块下的子组件 2、加载任务面板组件后，系统并不会去加载基础、订单、运输、仓储模块相关的组件 3、只有当路由地址指向具体模块时，如/home/basic，系统才动态加载basic模块下所有的组件 优点：懒加载机制很好的解决了系统初始加载资源过多，导致系统响应缓慢的问题 缺点：当模块本身比较大时，动态加载还是会导致一定的延迟，系统加载缓慢还是无法从根本上解决这个问题 补充说明：为了弥补懒加载机制的缺点，angular推出了预加载机制，接下来介绍预加载机制与懒加载机制相结合的实际使用案例 4、预加载机制 预加载机制：系统将其他暂时不要用到的模块组件，提前下载好到客户端，下载过程不影响当前访问界面的加载和响应速度 比如：我登录当前物流系统后，进入了计划面板界面，当系统加载好计划面相关js后，会继续下载其他模块的js，当我再去访问其他模块时，无需再动态下载相关组件依赖，使系统加载和响应速度更快。 4-1、配置根模块路由【app-routing.module.ts】的自定义预加载策略 这里配置了预加载预加载订单模块、运输模块、仓储模块 #根模块路由配置 #data: { aheadLoad: true } 这个aheadLoad变量名可以自定义，用于后续预加载判断哪些模块需要预加载，设置为true预加载，否则不进行预加载 const routes: Routes = [ { path: 'basic', loadChildren: () => import('./module/basic/basic.module').then(m => m.BasicModule) }, { path: 'order', loadChildren: () => import('./module/order/order.module').then(m => m.OrderModule),data: { aheadLoad: true } }, { path: 'transport', loadChildren: () => import('./module/transport/transport.module').then(m => m.TransportModule),data: { aheadLoad: true } }, { path: 'storage', loadChildren: () => import('./module/storage/storage.module').then(m => m.StorageModule),data: { aheadLoad: true } }{ path: 'taskPane', component: TaskPaneComponent, data: { title: '任务面板' } } ];4-2、创建自定义的预加载策略类，并实现PreloadingStrategy import { Injectable } from '@angular/core'; import { PreloadingStrategy, Route } from '@angular/router'; import { Observable, of } from 'rxjs'; /** * 自定义的模块预加载策略 */ @Injectable() export class CusPreloadingStrategyService implements PreloadingStrategy { constructor() { } preload(route: Route, load: () => Observable): Observable { //判断路由中的自定义参数aheadLoad，aheadLoad为true则预加载 //当然这里也可以加入更复杂的判断用来动态加载不同的模块，比如根据不同角色加载可能用到的不同模块，如果当前是订单管理员，那么可以只需要预加载订单模块，这样可以更大程度的提高系统响应速度，减少服务器不必要的开销 if (route.data && route.data['aheadLoad']) { return load(); } else { return of(null); } } }4-3、配置根模块路由【app-routing.module.ts】的预加载策略 @NgModule({ imports: [RouterModule.forRoot(routes, { //将自定义的策略CusPreloadingStrategyService 配置到preloadingStrategy preloadingStrategy: CusPreloadingStrategyService })], exports: [RouterModule] })4-4、到此预加载机制搞定，重启项目，会看到如下效果： 访问当前的模块会先加载好，预加载的模块会在之后加载，从而不会影响当前访问的速度，同步弥补的懒加载的缺点，太棒了！
|
【本文地址】
今日新闻 |
推荐新闻 |