手把手教你提高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/storage

3、配置基础、订单、运输、仓储子模块的路由

     说明：这里为了演示，只简单的配置自定义模块的根组件，实际业务可以根据实际情况定义更多该模块的路由组件

#基础模块的路由配置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<any>): Observable<any> {
        //判断路由中的自定义参数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、到此预加载机制搞定，重启项目，会看到如下效果：

访问当前的模块会先加载好，预加载的模块会在之后加载，从而不会影响当前访问的速度，同步弥补的懒加载的缺点，太棒了！