寫作文章的當下，已經(jīng)是Ionic 4和5的時代革为，但近期有個Ionic 3的項目需要優(yōu)化导披，而之前對Ionic 和Angular都沒有接觸笋粟，入門過程中遇到一些概念上的疑惑怀挠，這里做些總結(jié)析蝴。
Angular Module
對比過Angular 和Ionic 會發(fā)現(xiàn)，兩者的CLI 工具绿淋，在生成代碼方面闷畸，有一點差異：
ng g module shop
ng g c shop/index
ng g c shop/cart
ng g c shop/checkout
ng g c shop/confirm
通過這組命令，Angular 可以生成一個module吞滞，并在這個module 下生成多個component 并包含進module佑菩。
@NgModule({
imports: [
CommonModule
],
declarations: [IndexComponent, CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }
但是在Ionic 中，在生成代碼時裁赠，類型中并沒有module殿漠，但是卻多了一個page 的概念。
ionic generate [<type>] [<name>] [options]
type ..................... The type of generator (e.g. component, directive,
page, pipe, provider, tabs)
Ionic Page
在Ionic 中page 有兩層概念佩捞，首先它是一個component绞幌，其次它也可以是一個module。初次接觸可能會有點暈一忱，我們看下例證莲蜘。
第一步
ionic generate page cart --no-module
先不去管尾部參數(shù)的含義，這行命令帘营，創(chuàng)建了一個component：CartPage
@Component({
selector: 'page-cart',
templateUrl: 'cart-page.html',
})
export class CartPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
}
這里體現(xiàn)了page的第一層概念票渠，它是一個component。
第二步
ionic generate page shop
這行命令芬迄，創(chuàng)建了一個component：ShopPage问顷，以及聚合了這個component 的module。
// shop.ts
@IonicPage
@Component({
selector: 'page-shop',
templateUrl: 'shop-page.html',
})
export class ShopPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
}
// shop.module.ts
@NgModule({
declarations: [
ShopPage
],
imports: [
IonicPageModule.forChild(ShopPage),
]
})
export class ShopPage {}
這里體現(xiàn)了page的第二層概念禀梳。
注意這里择诈，在component 定義的上方，多了一個
@IonicPage的注解出皇。Ionic 框架會對它有特殊的處理羞芍，已知的部分是，如果component 上有這個注解郊艘，但Ionic 運行時如果沒有找到相同名稱的module荷科，會報錯。
這里是個人覺得Ionic 設計原語中不大一致的地方纱注，通過ionic g page --no-module創(chuàng)建的page 卻不是IonicPage畏浆，直觀的體現(xiàn)是，生成的component 上方?jīng)]有這個注解 ??狞贱。(僅僅站在框架使用者的角度）
Ionic 中如何把多個頁面“聚合”在一個module 中
在開始的例子中刻获，Angular CLI 生成的一組文件，實現(xiàn)了一個效果瞎嬉，在shop 這個module 中蝎毡，包含了index, cart, checkout, confirm 四個頁面厚柳。
module 是Angular 運行時，控制資源(js)加載的單位沐兵，我們可以整體控制一個module 是預加載還是懶加載别垮，從而實現(xiàn)不同場景下的優(yōu)化策略。
Ionic 運行時扎谎，對module 默認是懶加載的碳想。
如果我們需要在Ionic 中，對shop 的四個頁面毁靶，實現(xiàn)整體預加載胧奔，那么首先要把這些頁面聚合到一個module 中，該怎么做呢预吆？
Ionic module 預加載的設置葡盗，不在此文講述。
Ionic CLI 在生成代碼時啡浊，并沒有像Angular CLI 那樣觅够，對這個需求提供直接支持。因為如前文提到巷嚣，在CLI 提供的語義中喘先，沒有module 這個概念。
但實際生成的代碼中module 是存在的廷粒，所以我們可以自己動手窘拯。
第一步
ionic generate page cart --no-module
ionic generate page checkout --no-module
ionic generate page confirm --no-module
第二步
修改shop module 定義
// shop.module.ts
@NgModule({
declarations: [
ShopPage,
CartPage,
CheckoutPage,
ConfirmPage
],
imports: [
IonicPageModule.forChild(ShopPage),
],
entryComponents: [
CartPage,
CheckoutPage,
ConfirmPage
]
})
回顧
通過對page 和module 的概念區(qū)分，以及對比Angular 和 Ionic CLI 在生成代碼環(huán)節(jié)的差異坝茎，我們可以了解到涤姊，如何在Ionic 中，如何手動組織module嗤放，來靈活的滿足運行時靈活的資源加載需求思喊。
