1. 程式人生 > >Ionic3,懶加載

Ionic3,懶加載

調用 idt ack 字符串 用戶體驗 height 懶加載 用戶 步驟

Ionic懶加載:

  普通的ionic項目中,創建好每一個Component頁面後,都需要在app.module.ts中進行declaration(聲明)後才能進行調用,而這樣的聲明方式,及在APP加載過程中,所有的component都將全部加載,因此,APP的啟動時間會增加,影響用戶體驗。

  使用懶加載,可以減少APP的啟動時間,減少打包的體積,同時也為路由提供了更加簡便的操作。

實現效果

技術分享圖片

項目目錄

技術分享圖片

  在ionic3中,對於每一個Component頁面,都需要設置單獨的module。

懶加載的實現步驟:

  ①在新創建好的項目中,找到app.module.ts,刪除掉裏面的已經寫好的HomePage聲明,如下圖所示;

  技術分享圖片  

  ②修改home文件夾下面的相關文件,實現“懶加載”,相關步驟:

    一:修改 home.ts 文件,如圖所示,添加 @IonicPage() 註解

      技術分享圖片

    二:添加 home.module.ts 文件,對 home 組件進行相關聲明,並且通過引入 IonicPageModule.forChild(),實現懶加載頁面的註冊:

      技術分享圖片

    三:調用,因為是初始頁面,所以調用的位置在 app.component.ts 中,直接用字符串的方式調用,HomePage:

      技術分享圖片

  如果你要實現如效果圖中的效果,則依次創建對應的頁面,然後在 home.ts 文件下定義、引用就行。

    ①.home.html 頁面中的定義方式:

      技術分享圖片

    ② home.ts 中的定義:

      技術分享圖片

項目創建過程中遇到的問題

  ① error.cannot find module “.”

  技術分享圖片

  ②錯誤原因:關聯依賴的引用文件錯誤導致。

  技術分享圖片

  ③修改正確的相關引用文件:

  技術分享圖片

The Ending ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Ionic3,懶加載