Angular 6 的预加载与懒加载

angular的文件越来越大，导致用户体验差，使用预加载与懒加载

懒加载场景：

应用在启动时，某些模块不需要，就可以在某些模块中使用懒加载
优点:使用懒加载后，只加载必须的模块，可以加快启动速度。
缺点:懒加载时可以提高用户的初始体验，但是在某个模块体积过大时，还是会发生堵塞现象，导致用户的体验下降

预加载场景

当应用启动后，后续功能模块可能会使用，再基础模块加载后，加载其他的预加载模块，这样在点击预加载模块事，体验非常好。

代码

在使用预加载时，要分为几个Module.拆分Module,在这之前要先传创建上3个模块，供预加载使用
在app-routing.module.ts中定义路由模块

path:"index",
component:indexComponent,
children:[
  {
   path:"home",
   loadChildren:"./home/home.module#HomeModule",//懒加载
  data:{preload:true},//预加载判断
  },
  {
   path:"info",
   loadChildren:"./info/info.module#InfoModule",//懒加载
  data:{preload:true},//预加载判断
  },
  {
   path:"pay",
   loadChildren:"./pay/pay.module#PayModule",//懒加载
  data:{preload:true},//预加载判断
  },
]

定义预加载策略

新建预加载文件
selective-preloading-strategy.ts
import {PreloadingStrategy,Route}  from "@angular/router";
import {Observable} from "rxjs";
/**
预加载策略
*/

export class SelectivePreloadingStrategy implements PrelaodingStrategy{
preload(route:Route,laod:Function):Observalbe<any>{
  
return route.data && route.data['preload] ? load() :Observable.of(null)
}
}

需要加载的地方，我们执行load方法。

最后在AppModule中加入这个策略

import {RouterModule,preloadAllModules} from "@angular/router";
import  {SlectivepreloadingStrategy} from "./select/selcetive-preloading-strategy.ts"
appRoutes是app-routing.module.ts中的路由
在imports中导入路由
RouterModule.forRoot(appRoutes,{preloadingStrategy:PreloadAllModules})
并且假如到providers:[SlectivepreloadingStrategy]

版本6.1.1
部分内容借鉴[山高路远]https://www.zhihu.com/people/sxlwar