一）懶加載
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
}
