本文分享並演示了在 Ionic 3 框架中如何進行模塊的延遲載入（Lazy Load）開發。 本文分享並演示了在 Ionic 3 框架中如何進行模塊的延遲載入（Lazy Load）開發。 在我的實戰課程 "「快速上手Ionic3 多平臺開發企業級問答社區」" 中，因為開發的仿知乎 App 模塊間的加 ...
本文分享並演示了在 Ionic 3 框架中如何進行模塊的延遲載入（Lazy Load）開發。
本文分享並演示了在 Ionic 3 框架中如何進行模塊的延遲載入（Lazy Load）開發。
在我的實戰課程「快速上手Ionic3 多平臺開發企業級問答社區」中，因為開發的仿知乎 App 模塊間的載入沒有使用到延遲載入（懶載入，Lazy Load）的技術，而當有些同學在開發自己的 App 越來越複雜的時候，發現了模塊載入的性能問題。
這時就出現了需要將模塊延遲載入的需求，而 Ionic 3 的一個特性就是支持延遲載入，而且代碼的變動非常小。
為了給各個階段的同學一個開發演示，本文就直接給大家演示一下 Ionic 3 的模塊延遲載入開發。
關於 Ionic 框架學習過程中遇到的各種常見問題，可以參見我從一千多個課程提問中給大家整理出來的常見問題 Q&A 文章。
1. 項目初始化
首先通過 Ionic CLI 新建一個空項目，命令為 ionic start lazyLoad blank。
空項目啟動後如下圖所示。
在 src/app/app.module.ts 文件中的 declarations 與 entryComponents 節點下可以看到 Ionic 自動聲明瞭 MyApp 與 HomePage 兩個模塊。
這樣的預設配置方式，就會讓所有聲明的頁面模塊在 App 啟動時一次載入起來，可能會造成相關的性能問題。
2. 模塊的延遲載入
我們首先刪除 src/app/app.module.ts 文件中的 HomePage 模塊的聲明以及調用。
然後在文件 src/pages/home/home.module.ts 中去單獨定義 HomePage 模塊的聲明，代碼如下圖所示。
並修改 src/pages/home/home.ts 添加 @IonicPage 裝飾器的導入與調用，代碼如下圖所示。
並修改 src/app/app.component.ts 文件中的 rootPage 的定義。
rootPage:any = 'HomePage';至此，我們就輕鬆地配置好了 HomePage 模塊的延遲載入功能。
3. 測試延遲載入
我們打開 Chrome 的網路監控模板，刷新 App，可以看到 JavaScript 文件的請求與載入。
main.js 文件是整個 App 框架以及相關依賴的打包文件，而 0.js 就是分離後的 HomePage 模塊的代碼，我們可以看到對應的模塊已經在 main.js 之後進行了延遲載入。
而當你的 App 包含非常多頁面的時候，你肯定不希望所有的頁面模塊一次都打包在 main.js 中並一次請求載入進來，所以，延遲載入可以實現「用到哪個頁面模塊就去載入哪個模塊的代碼」，可以大大提高 App 的運行性能。
後續的文章我們還將深入探究延遲載入的原理以及更加複雜的應用場景。
