我為什麼要升級到Ionic3

黑闊大人發表於2019-02-16

2017年4月5日 ionic3正式釋出了,對於從ionic2 rc版本開始用的我也進行了這次升級並且平穩執行在專案上,在我看來升級ionic3是很有必要的

Ionic3帶來的新特性

  • Angular 4.0
    新的版本下,改進 AOT 編譯器,分離 animations 包,縮小生成後的程式碼量,執行更快,改進 ngIf 和 ngFor 等具體內容可以訪問angular4更新來檢視。

  • typescript 2.1, 2.2的支援
    這一次的更新將提升typescript應用構建和型別檢查的速度並且引入了對mix-in的支援等具體可以訪問TypeScript release notes來檢視。

  • @IonicPage裝飾器
    ionic2中導航器不是基於url的,如果想使用url訪問就要通過DeepLinker來實現,這是非常麻煩的,而在新版本我們可以通過@IonicPage裝飾器來實現。並且可以更輕鬆的在專案中設定延遲載入,設定延遲載入頁面的優先順序,併為每個頁面自定義配置。

  • 懶載入
    Ionic3.0版本開始,支援了延遲載入,我們可以將某些模組設定為延時載入,只有使用者開啟相關的頁面的時候,這個模組所在的js才會被下載,這樣能減少使用者初次下載的檔案的大小。

總的來說,升級Ionic3將使我們的專案變得更小,更快,而更吸引我的則是懶載入,不僅僅是加快了app首次的啟動時間,更多的是配合上@IonicPage可以非常方便部署web版本,讓每次進入不用去請求龐大的js檔案,做到首屏的快速載入,write once run anywhere,這些就是我升級Ionic3的原因。

怎樣升級到Ionic3

  1. 首先訪問ionic-app-base複製package.jsondependenciesdevDependencies到自己的專案中後刪除掉原本的node_modules資料夾,執行npm install重新下載依賴。

  2. 將BrowserModule加入你的app/app.module.ts import { BrowserModule } from `@angular/platform-browser`;

  3. 在app.module.ts中將BrowserModule新增進imports中。
    imports: [ BrowserModule, IonicModule.forRoot(MyApp) ],

  4. 由於ionic3將ionic-native拆開成個各種小的包@ionic-native/*,splash-screenstatus-bar等之前ionic-native中的模組都需要重新引入具體可以參照http://ionicframework.com/doc…來對號入座。

最後執行ionic serve開始享受ionic3帶來的改變吧!

相關文章