ionic3 懶載入

NO IMAGE

ionic3 預設使用了懶載入技術,相較以前預載入的版本,ionic3構建的app在首頁載入時間上有較大的優化,但是,ionic3預設每個頁面都會對應一個模組,對於頁面較多,但是每個模組都很小的應用可能並不怎麼合理。於是,嘗試將幾個小模組合併為幾個大的模組。

1. 一個模組對應一個頁面:

預設狀態下每個頁面都會對應一個模組,如果專案之中的頁面比較多那麼最後構建的專案中的將會看到有很多的 js 。

原setting.module.ts


import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingPage } from './setting';
@NgModule({
declarations: [
SettingPage,
],
imports: [
IonicPageModule.forChild(SettingPage),
],
entryComponents: [
SettingPage,
]
})
export class SettingPageModule {}

2. 一個模組對應多個頁面

修改後的setting.module.ts 


import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingPage } from './setting';
import {UserPasswordPageModule} from "./user-password/user-password.module";
import {UsernamePageModule} from "./username/username.module";
@NgModule({
declarations: [
SettingPage,
],
imports: [
IonicPageModule.forChild(SettingPage),
//將兩個子頁面模組引入
UserPasswordPageModule,
UsernamePageModule,
],
entryComponents: [
SettingPage,
]
})
export class SettingPageModule {}

總結

以上所述是小編給大家介紹的ionic3 懶載入,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對指令碼之家網站的支援!

您可能感興趣的文章:

ionic3 Angular4實現介面請求及本地json檔案讀取示例Ionic3 UI元件之autocomplete詳解ionic 3.0 專案搭建執行環境的教程ionic3實戰教程之隨機佈局瀑布流的實現方法Angular 4.x Ionic3踩坑之Ionic 3.x介面傳值詳解