一）懒加载

Ionic3默认采用懒加载机制，什么是懒加载呢？当我们第一次进入应用，会加载app.module,如果没有采用懒加载，那么app.module里的所有东西都会被加载，很显然这是不太合适的，因为里面的组件和服务我们在第一次进入应用时并没有全部使用，可能只使用了很少的一部分，那么对于比较大型的应用来说，由于页面和其他的服务，指令，管道比较多，就会造成比较用户体验不好的影响。
这个时候我们需要把应用分为一个个module，各自引入自己用到的东西，不要管别的模块。那么第一次进入应用，就只加载很少的app.module和root page对应的module，当我们进入其他页面的时候，才会去加载相应的module。这样的好处是项目代码结构清晰，易于维护，易于开发，而且第一次加载速度比较快。
当我们使用Ionic3的CLI来新建页面，默认的会是懒加载的结构，甚至不止页面，所有的component,service,directive都默认的是懒加载。

配置ionic3懒加载步骤：

1.给需要懒加载的页面配置module.ts；

例：配置about.module.ts：

1.  import { NgModule } from '@angular/core';  
2.  import { IonicPageModule } from 'ionic-angular';  
3.  import { AboutPage } from './about';  

5.  @NgModule({  
6.  declarations: [  
7.  AboutPage,  
8.  ],  
9.  imports: [  
10.  IonicPageModule.forChild(AboutPage),  
11.  ],  
12.  })  
13.  export class AboutPageModule { }

2.在对应页面的.ts文件里增加@IonicPage()特性；

以about.ts为例，在@Component上方加上@IonicPage()特性(行号4，注意在上面引用IonicPage(见2行)),其他需要懒加载的页面同样操作配置。

1.  import {Component} from '@angular/core';  
2.  import {NavController, IonicPage} from 'ionic-angular';  

4.  @IonicPage()  
5.  @Component({  
6.  selector: 'page-about',  
7.  templateUrl: 'about.html'  8.  })  
9.  export class AboutPage {  

11.  constructor(public navCtrl: NavController) {  
12.  }  
13.  }

3.在app.module.ts移除页面引用；

将配置过懒加载的页面，在app.module.ts中进行移除引用，移除后的代码如下：

1.  import {HttpModule} from "@angular/http";  
2.  import {AppService} from "./app.service";  
3.  import {NgModule, ErrorHandler} from '@angular/core';  
4.  import {BrowserModule} from '@angular/platform-browser';  
5.  import {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';  
6.  import {MyApp} from './app.component';  
7.  //import {AboutPage} from "../pages/about/about";  9.  import {StatusBar} from '@ionic-native/status-bar';  
10.  import {SplashScreen} from '@ionic-native/splash-screen';  

12.  @NgModule({  
13.  declarations: [  
14.  MyApp  
15.  //AboutPage  16.  ],  
17.  imports: [  
18.  BrowserModule,  
19.  HttpModule,  
20.  IonicModule.forRoot(MyApp)  
21.  ],  
22.  bootstrap: [IonicApp],  
23.  entryComponents: [  
24.  MyApp  
25.  //AboutPage  26.  ],  
27.  providers: [  
28.  StatusBar,  
29.  SplashScreen,  
30.  AppService,  
31.  {provide: ErrorHandler, useClass: IonicErrorHandler}  
32.  ]  
33.  })  
34.  export class AppModule {  
35.  }

4.使用懒加载；

使用懒加载，不需要在顶部进行import导入，只需要将之前的页面名字用引号引起来即可：

例：app.component.ts代码段：

1.  import { Component } from '@angular/core';  
2.  import { Platform } from 'ionic-angular';  
3.  import { StatusBar } from '@ionic-native/status-bar';  
4.  import { SplashScreen } from '@ionic-native/splash-screen';  
5.  //import {TabsPage} from "../pages/tabs/tabs";  7.  @Component({  
8.  templateUrl: 'app.html'  9.  })  
10.  export class MyApp {  
11.  //不需要在顶部进行import导入，只需要将之前的页面名字用引号引起来即可  12.  //rootPage:any = TabsPage;  13.  rootPage:any = 'TabsPage';  

15.  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {  
16.  platform.ready().then(() => {  
17.  statusBar.styleDefault();  
18.  splashScreen.hide();  
19.  });  
20.  }  
21.  }

配置完成。

NgModule

 NgModule {     // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
     //            然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
    providers : Provider[]     // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
     //               然后我们就可以在这个模块中使用它们了.
    declarations : Array<Type<any>|any[]>     // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
     //          可以直接使用别的模块提供的一些指令,组件等等.
    imports : Array<Type<any>|ModuleWithProviders|any[]>     // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
     //          如果别的模块导入了我们这个模块,
     //          那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
    exports : Array<Type<any>|any[]>    // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
    //                  Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
    entryComponents : Array<Type<any>|any[]>    // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
    bootstrap : Array<Type<any>|any[]>    // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
    schemas : Array<SchemaMetadata|any[]>    // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
    //     那么这个模块将不会被注册.
    id : string
 }

https://www.angular.cn/guide/ngmodule-faq

IonicPage

https://ionicframework.com/docs/api/navigation/IonicPage/

作者：ISD_H5开发团队
链接：https://www.jianshu.com/p/2c95e0fa4cc6