Boost Ionic 3 Performance with the New Ionic-Angular 3.7.0

Step by step guides how to boost or optimize Ionic 3 app performance with the new Ionic-Angular 3.7.0. After Ionic Framework team announce the release of Ionic-Angular 3.7.0, we have to implement it to our existing Ionic 3 app which has a problem with performance and startup time. Our existing Ionic 3 app, have the Ionic and Angular version like shown on `package.json` dependencies below.

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/device": "^3.4.4",
    "@ionic-native/in-app-browser": "^3.4.4",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "cordova-android": "^6.2.3",
    "cordova-ios": "^4.4.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.1",
    "cordova-plugin-whitelist": "1.3.1",
    "ionic-angular": "3.0.1",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
},

First, the thing to do is upgrade existing Ionic and Cordova version. Open the terminal or Node command line then type this command.

sudo npm install -g ionic@latest cordova

Now, check the all tools and framework version by typing this command.

cli packages: (/Users/didin/Documents/Apps/avristv3/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 1.3.1
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.0.1

System:

    Android SDK Tools : 26.0.2
    ios-deploy        : 1.9.0
    ios-sim           : 5.0.12
    Node              : v6.9.4
    npm               : 3.10.10
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235

Misc:

    backend : legacy

Now, update all necessary Ionic 3 and Angular 4 versions.

npm install [email protected] --save
npm install @ionic/[email protected] --save-dev
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install @angular/[email protected] --save
npm install [email protected] --save
npm install [email protected] --save

Next, check `package.json` to make sure all required versions installed.

"dependencies": {
  "@angular/common": "^4.4.3",
  "@angular/compiler": "^4.4.3",
  "@angular/compiler-cli": "^4.4.3",
  "@angular/core": "^4.4.3",
  "@angular/forms": "^4.4.3",
  "@angular/http": "^4.4.3",
  "@angular/platform-browser": "^4.4.3",
  "@angular/platform-browser-dynamic": "^4.4.3",
  "@ionic-native/core": "3.4.2",
  "@ionic-native/device": "^3.4.4",
  "@ionic-native/in-app-browser": "^3.4.4",
  "@ionic-native/splash-screen": "3.4.2",
  "@ionic-native/status-bar": "3.4.2",
  "@ionic/storage": "2.0.1",
  "cordova-android": "^6.2.3",
  "cordova-ios": "^4.4.0",
  "cordova-plugin-console": "1.0.5",
  "cordova-plugin-device": "1.1.4",
  "cordova-plugin-splashscreen": "~4.0.1",
  "cordova-plugin-statusbar": "2.2.1",
  "cordova-plugin-whitelist": "1.3.1",
  "ionic-angular": "^3.7.0",
  "ionic-plugin-keyboard": "~2.2.1",
  "ionicons": "3.0.0",
  "rxjs": "^5.4.3",
  "sw-toolbox": "3.4.0",
  "zone.js": "^0.8.17"
},

Now, remove and add again Ionic Cordova platforms.

ionic cordova platform rm android
ionic cordova platform add android
ionic cordova platform rm ios
ionic cordova platform add ios

Notes, if you use old images size for icon and splash-screen make sure change the size to larger size 2732*2732 pixels then regenerate the icons and splash.

ionic cordova resources

Or you can resize each icon and splash images manually. Now, run the Ionic-Angular 3.7.0 app to the real device.

ionic cordova run android --prod

If you find an error in runtime like this on the chrome console.

Uncaught ReferenceError: webpackJsonp is not defined

Add this line to `index.html` before `main.js`.

<script src="build/vendor.js"></script>

Now, you will feel the difference with previous Ionic-Angular version on the real Android device. For iOS, you should run inside XCode by typing this command first.

ionic cordova build ios --prod

That it's, maybe you will face the different problem with this new Ionic-Angular 3.7.0 just comment below and see if we can find the solution.

Thanks!