一）懶加載
Ionic3默認采用懶加載機制正林，什么是懶加載呢？當(dāng)我們第一次進入應(yīng)用充尉，會加載app.module,如果沒有采用懶加載锤悄，那么app.module里的所有東西都會被加載，很顯然這是不太合適的台诗，因為里面的組件和服務(wù)我們在第一次進入應(yīng)用時并沒有全部使用完箩，可能只使用了很少的一部分赐俗，那么對于比較大型的應(yīng)用來說拉队，由于頁面和其他的服務(wù)，指令阻逮，管道比較多粱快，就會造成比較用戶體驗不好的影響。
這個時候我們需要把應(yīng)用分為一個個module叔扼，各自引入自己用到的東西事哭，不要管別的模塊。那么第一次進入應(yīng)用瓜富，就只加載很少的app.module和root page對應(yīng)的module鳍咱，當(dāng)我們進入其他頁面的時候，才會去加載相應(yīng)的module与柑。這樣的好處是項目代碼結(jié)構(gòu)清晰谤辜，易于維護，易于開發(fā)价捧，而且第一次加載速度比較快丑念。
當(dāng)我們使用Ionic3的CLI來新建頁面，默認的會是懶加載的結(jié)構(gòu)结蟋，甚至不止頁面脯倚，所有的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.在對應(yīng)頁面的.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導(dǎo)入夜郁，只需要將之前的頁面名字用引號引起來即可：
例：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導(dǎo)入什燕，只需要將之前的頁面名字用引號引起來即可
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: 這個選項是一個數(shù)組,需要我們列出我們這個模塊的一些需要共用的服務(wù)
// 然后我們就可以在這個模塊的各個組件中通過依賴注入使用了.
providers : Provider[]
// declarations: 數(shù)組類型的選項, 用來聲明屬于這個模塊的指令,管道等等.
// 然后我們就可以在這個模塊中使用它們了.
declarations : Array<Type<any>|any[]>
// imports: 數(shù)組類型的選項,我們的模塊需要依賴的一些其他的模塊,這樣做的目的使我們這個模塊
// 可以直接使用別的模塊提供的一些指令,組件等等.
imports : Array<Type<any>|ModuleWithProviders|any[]>
// exports: 數(shù)組類型的選項,我們這個模塊需要導(dǎo)出的一些組件,指令,模塊等;
// 如果別的模塊導(dǎo)入了我們這個模塊,
// 那么別的模塊就可以直接使用我們在這里導(dǎo)出的組件,指令模塊等.
exports : Array<Type<any>|any[]>
// entryComponents: 數(shù)組類型的選項,指定一系列的組件,這些組件將會在這個模塊定義的時候進行編譯
// Angular會為每一個組件創(chuàng)建一個ComponentFactory然后把它存儲在ComponentFactoryResolver
entryComponents : Array<Type<any>|any[]>
// bootstrap: 數(shù)組類型選項, 指定了這個模塊啟動的時候應(yīng)該啟動的組件.當(dāng)然這些組件會被自動的加入到entryComponents中去
bootstrap : Array<Type<any>|any[]>
// schemas: 不屬于Angular的組件或者指令的元素或者屬性都需要在這里進行聲明.
schemas : Array<SchemaMetadata|any[]>
// id: 字符串類型的選項,模塊的隱藏ID,它可以是一個名字或者一個路徑;用來在getModuleFactory區(qū)別模塊,如果這個屬性是undefined
// 那么這個模塊將不會被注冊.
id : string
}
