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
-
首先訪問ionic-app-base複製
package.json
的dependencies
和devDependencies
到自己的專案中後刪除掉原本的node_modules
資料夾,執行npm install
重新下載依賴。 -
將BrowserModule加入你的app/app.module.ts
import { BrowserModule } from `@angular/platform-browser`;
-
在app.module.ts中將BrowserModule新增進imports中。
imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], -
由於ionic3將ionic-native拆開成個各種小的包@ionic-native/*,
splash-screen
,status-bar
等之前ionic-native中的模組都需要重新引入具體可以參照http://ionicframework.com/doc…來對號入座。
最後執行ionic serve
開始享受ionic3帶來的改變吧!