Ionic3新特性--頁面懶加載1

Ionic3新的懶加載機制給我帶來了以下新特性：

1. 避免在每個使用到某Page的Module或其餘Page中重複的import這個類（須要寫一堆路徑）
2. 容許咱們經過字符串key在任何想使用的地方獲取某一Page；
3. 經過以上兩點讓咱們的代碼更簡潔；
4. 懶加載，客戶響應度更好，體驗更友好的加載，更快的響應。這個是我認爲的帶來的最好的特性；
5. 讓開發過程實時編譯更快。

下面咱們對比的看看老的方式和新的懶加載方式的實現。

環境描述：
Ionic CLI: 3.1.2

1. 老的加載方式實現

首先咱們在terminal中經過以下命令建立一個新的Ionic3的應用：

ionic start routy tabs --v2

這裏建立了一個Ionic3的app，來看一下app.module.ts的定義：

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

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  ...
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ]
})

每次咱們建立一個新的Page，咱們須要在app.moudle.ts中添加對應的import和聲明。
************
一樣，在Main Component中，也須要一樣的引入：

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;
  ...
}

這裏當須要設置rootPage時，也須要經過import來引入對應Page。
************
一樣的對於navigation也須要進行導航Page的import：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AboutPage } from '../about/about';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }
  
  ngOnInit() {
    this.navCtrl.push(AboutPage);
  }
}

這裏咱們須要在經過NavController導航前，import AboutPage。

2. 新的懶加載的方式實現

咱們能夠看到，基於我當前的最新的Ionic CLI的版本(3.1.2)，建立的新工程裏面的默認頁面不是基於Lazy Load的。
而後咱們經過命令新建立一個page試試：

ionic g page options

注意，這個命令要在當前工程根目錄下執行。
建立完成後，咱們就在pages文件夾下擁有了一個新的OptionsPage:
pages/options/options.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the OptionsPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-options',
  templateUrl: 'options.html',
})
export class OptionsPage {
    ...
}

能夠看到與之前建立的Page不一樣的是，增長了一個@IonicPage裝飾器。
而且在同一個文件夾內，咱們能夠看到還自動生成了一個新的名爲OptionsPageModule的Module：
pages/options/options.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OptionsPage } from './options';

@NgModule({
  declarations: [
    OptionsPage,
  ],
  imports: [
    IonicPageModule.forChild(OptionsPage),
  ],
  exports: [
    OptionsPage
  ]
})
export class OptionsPageModule {}

好了，到此爲止，就是咱們引入一個新的Page所須要作的全部事情，剩下的就是直接使用了，咱們簡單總結一下：

1. 建立一個Component，而且經過@IonicPage()裝飾器進行裝飾；
2. 建立一個Module，在其中引入建立的Page,而且經過IonicPageModule.forChild(OptionsPage)在全局中聲明這個Page。
   好了，咱們能夠在其餘頁面中使用了。
   *********
   咱們在pages/home/home.ts中增長以下代碼：

goToOption():void{
  this.navCtrl.push('OptionsPage');
}

注意這裏，調用的時候也有改變，咱們只須要傳遞一個字符串，這個字符串默認就是Page對應的類名。
而後在pages/home/home.html中增長按鈕，經過點擊來觸發上面的方法：

<button ion-button secondary (click)="goToOption()">懶加載</button>

而後咱們就能夠經過Chrome跟蹤一下是否真正實現了懶加載，在www目錄下能夠看到下圖：

增長了一個0.main.js文件，這裏面就是咱們的OptionsPage聲明。
***********
好了，讓咱們能夠經過將默認的頁面也都改爲這種模式，修改後app.module.ts變得很是簡潔：

@NgModule({
  declarations: [
    MyApp
  ]
  ...
  entryComponents: [
    MyApp
  ]
  ...
})

固然別忘了，將相應的路由的位置的類名，修改成對應的字符串名：
app.component.ts:

export class MyApp {
  rootPage:any = "Tabs";
  ...
}

tabs.ts:

export class Tabs {
  tab1Root = "Home";
  tab2Root = "About";
  tab3Root = "Contact";
  ...
}

總結一下

做爲Ionic3推出的最重要的特性，經測試，當前基於3.1.2的最新Ionic CLI已經徹底穩定的支持Lazy Loaded Pages，其在解決項目加載慢的同時，也大大的簡化了咱們代碼量。可是仍是有一些設計上的問題須要解決，固然設計上的事情，沒有銀彈，咱們仍是能夠根據具體狀況具體的處理。
less code, less imports, less paths to remember: The less, the better!
注意：只能是在基於NavController導航的Page能夠實現懶加載，若是做爲Component使用（直接在html中使用selector做爲標籤使用），仍是要採用老的加載機制。可是官方依然推薦咱們對Component、Pipe等進行模塊化處理，後續會繼續說明這一點。

本文翻譯自Ionic 3 New Pages Lazy Loading並根據我的理解完善，並根據最新的狀況對一些內容進行了修改。