在最初使用ionic的時候，根據教程學習使用ionic搭建一個移動app的時候發現裡面的元件全部是使用的全屏載入的方式進行，根據查詢相關的資料學習瞭如何實踐ionic3懶載入方式。。。

以下是我進行的步驟 這是app.component.ts裡的內容

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Http, XHRBackend, RequestOptions, HttpModule} from "@angular/http";

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
 

分別在home，about，contact資料夾下建立home.module.ts

import { NgModule } from '@angular/core';
import { HomePage} from './home';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }

about.module.ts

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

@NgModule({
  declarations: [AboutPage],
  imports: [IonicPageModule.forChild(AboutPage)],
})
export class AboutPageModule { }

contact.module.ts

import { NgModule } from '@angular/core';
import { ContactPage} from './contact';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
  declarations: [ContactPage],
  imports: [IonicPageModule.forChild(ContactPage)],
})
export class ContactPageModule { }
 

第二步，在對應的home.ts,about.ts,contact.ts中加入

import { IonicPage } from 'ionic-angular';

@IonicPage({segment: 'xxx'}) //這裡的segment是路由標識
@Component({
  ---
})

第三步，將tab.ts中的地址改邊一下

 tab1Root = 'HomePage';
 tab2Root = 'AboutPage';
 tab3Root = 'ContactPage';

這裡的HomePage 預設是與元件名稱一致的，如果需要修改HomePage,@IonicPage中的name也要對應修改 第四步，刪除app.module.ts中的HomePage,AboutPage,ContactPage的相關引用