一）懒加载
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
}
