App loads in 12 -15 seconds even with --release

Ionic Framework ionic-v3
1

I have an app that loads in both on iOS and Android in about 12 to 15 seconds. And yes, I did try the --release parameter during building.

ionic: 2.2.1
cordova: 6.5.0

this is my package.json

{
  "name": "name",
  "author": "name",
  "homepage": "https://site.com",
  "private": true,
  "scripts": {
    "ionic-serve": "ionic serve",
    "build-dev": "ionic-app-scripts build --dev",
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic-native/core": "^3.6.1",
    "@ionic-native/deeplinks": "^3.6.1",
    "@ionic-native/facebook": "^3.6.1",
    "@ionic-native/geolocation": "^3.6.1",
    "@ionic-native/google-plus": "^3.6.1",
    "@ionic-native/keyboard": "^3.6.1",
    "@ionic-native/push": "^3.6.1",
    "@ionic-native/social-sharing": "^3.6.1",
    "@ionic-native/splash-screen": "^3.6.1",
    "@ionic-native/status-bar": "^3.6.1",
    "@ionic/storage": "2.0.0",
    "angular2-moment": "^1.0.0",
    "bourbon": "^4.3.3",
    "ionic-angular": "2.2.0",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "socket.io": "^1.7.1",
    "socket.io-client": "^1.7.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "@types/googlemaps": "^3.26.1",
    "@types/node": "^7.0.4",
    "cordova": "6.5.0",
    "ionic": "2.2.2",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    },
    {
      "platform": "android",
      "version": "",
      "locator": "android"
    }
  ],
  "description": "ion2-FullApp: An Ionic project",
  "config": {
    "ionic_sass": "./config/sass.config.js"
  }
}
2

The --release flag is only for cordova related tasks. Try passing the --prod flag in your build. Also, I will note your app’s dependencies are really out of date. Between the versions of ionic-angular(now 3.6) angular (4.1) and app-scripts (2.1), you can get an even small/faster app.

1 Like
3

Thanks a lot for the tip, I will try with the --prod as well.
Regarding the dependencies, I have a huge concern about updating/upgrading the dependencies lest it breaks functionalities, can you give feedback/advise on that?
Thanks a lot.

4

For sure, I think the best bet is to

We go over breaking changes in our code base that can affect your app.
The additional libraries you have will also have their own changelog that you can reference

5

4 posts were split to a new topic: Problems upgrading from Ionic CLI 2.x to latest

6

So I took your advise and upgraded to latest version. And I am still facing the same exact problem.
I ran both version with 2.2.1 as well as latest, there is a very strange thing that I see in the network graph, there’s a huge gap you see in the middle where nothing happens at all, the browser does not request anything. You can see in the 2 screenshots that the main.js size has changed dramatically, yet same behaviour. Anyone can explain this?

ionic_2_Loading
ionic_2_Loading.png1390Ă—491 78.6 KB
ionic_3_Loading
ionic_3_Loading.png1396Ă—495 77.9 KB

7

The “nothing” device is probably evaluating and executing the app. You can find out by profiling the session.

Your size is falsified by the 304 response by the way I think. A 245B main.js wouldn’t really work. I think this is just the 304 response. You should clear you cache before comparing.

8

I disabled the cache and the main.js did get into a reasonable size, vendor.js is big also. I also did profiling and I still can’t figure out the reason for the period where nothing happens.

ionic_3_Netw
ionic_3_Netw.png975Ă—500 71.9 KB
ionic_3_Network
ionic_3_Network.png1393Ă—935 108 KB

9

2 seconds where it is parsing your HTML and painting it on the screen. Lots of foreach.

But 2 seconds startup is actually not that unreasonable. How exactly did you build the app?
What is your current ionic info output?

10

So I tested it on a simulator as well as as device and it is actually much faster now with CLI 3.10.3 even without updating the dependencies to the latest ionic, ionic-angular. The apk size is smaller and it loads much faster. But I am having some problems now. When I build with --prod the tab icons disappear and the push notifications do not show on the status bar anymore, they arrive (because I see them arriving on the icons badges if the App is opened) but if the app is in the background they stopped showing in the status bar.
I created a new topic here but no luck so far.