环境

node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0

背景介绍

Angular提供了路由懒加载，及在需要加载时才会加载相应路由，以此来减少非必要的网络请求(如在首页不加载详情)；

const routes: Routes = [
  {
    path: 'index',
    loadChildren: './pages/index/index.module#IndexPageModule'
  }
];

ionic4的提供的路由加载策略

@NgModule({
    imports: [
      RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
    ],
    exports: [RouterModule]
})

preloadingStrategy: 提供2种策略

• PreloadAllModules： 加载全部
• NoPreloading: 无预加载

下面我们分别试下这2种策略

PreloadAllModules

image.png

启动app,此时routes中的所有module均被加载.

NoPreloading

image.png

启动app, 此时routes中只有默认路由的module被加载

自定义PreloadingStrategy

自定义的目的：
能否提供某种方式？实现如下需求：

• 在首页(tab-home),预先加载’我的‘页面(tab-mine)

方式一

实现原理：
在需要预加载的路由中配置字段，只要有这个字段的都会被预加载。

在路由配置中增加一个字段，如：

{
        path: 'mine',
        loadChildren: './mine/mine.module#MinePageModule',
        data: {
          preload: true
        }
      }

新建文件：SimplePreloadingStrategy.ts
须实现PreloadingStrategy的preload()方法

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
export class SimpleLoadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    if (route.data && route.data.preload) {
      return load();
    }
    return of(null);
  }
}

app.routing.module
在app.routing.module文件中，使用SimpleLoadingStrategy，并在providers中提供SimpleLoadingStrategy；
这里我们使用login页面和main(tab页)测试下，添加 data : {preload: true}

const routes: Routes = [
  {path: '', redirectTo: '/index', pathMatch: 'full'},
  {path: 'index', loadChildren: './pages/index/index.module#IndexPageModule'},
  {path: 'login/:id', loadChildren: './pages/login/login.module#LoginPageModule', data : {preload: true}}
];
@NgModule({
  providers: [SimpleLoadingStrategy],
  imports: [
    RouterModule.forRoot(routes, {preloadingStrategy: SimpleLoadingStrategy})
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

启动app, 此时routes中加载了loginModule（数字1）；
此时进入main(tabs)页面,加载了mine页面

image.png

方式二

通过注解的方式，更加方便的使用。
实现原理：
在需要预加载的路由中配置字段，满足以下条件时，才会被加载：

• 路由配置中存在此字段
• 使用了@Preload('name')

在路由配置中增加一个字段，如：

{
        path: 'mine',
        loadChildren: './mine/mine.module#MinePageModule',
        data: {
          name: 'mine'
        }
      }

新建文件：SelectivePreLoading.ts
须实现PreloadingStrategy的preload()方法

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class SelectivePreLoading implements PreloadingStrategy {
  routes: { [name: string]: { route: Route; load: Function } } = {};

  preload(route: Route, load: Function): Observable<any> {
    if (route.data && route.data['name']) {
      this.routes[route.data['name']] = {
        route,
        load
      };
    }
    return of(null);
  }

  preLoadRoute(name: string) {
    const route = this.routes[name];
    if (route) {
      route.load();
    }
  }
}

app.routing.module
在app.routing.module文件中，使用SelectivePreLoading，并在providers中提供SelectivePreLoading；
这里我们使用login页面测试下，添加 data : {name: 'xxx'}

const routes: Routes = [
  {path: '', redirectTo: '/index', pathMatch: 'full'},
  {path: 'index', loadChildren: './pages/index/index.module#IndexPageModule'},
  {path: 'main', loadChildren: './pages/main/main.module#MainPageModule'},
  {path: 'login/:id', loadChildren: './pages/login/login.module#LoginPageModule', data : {name: 'login'}}
];
@NgModule({
  providers: [SelectivePreLoading],
  imports: [
    RouterModule.forRoot(routes, {preloadingStrategy: SelectivePreLoading})
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

index.page.ts

@PreLoad('login')
export class IndexPage implements OnInit {
  ...
}

main/home/home.page.ts

@PreLoad('mine')
export class HomePage implements OnInit {
  ...
}

启动app, 此时routes中加载了loginModule（数字1）；
此时进入main(tabs)页面,加载了mine页面

image.png

去除index.page.ts中的@Preload('login')测试
此时不会加载login页面。

下一篇将介绍页面之间如何传递参数。

参考文献

how-to-lazy-load-in-ionic-angular