Issue with app boot time

split this topic #21

8 posts were split to a new topic: Splash screen: 2 to 3 seconds. white screen: 10 seconds

#22

Now you have a base to work with.

  1. I would create a super simple project with ionic start blank blank, build it with --prod and run that on the device you are testing on - that is your base line.

  2. Then see what you can (temporarily) remove from your app that could take time to start: Cordova plugins, Ionic Native plugins, any library or component. Measure which one improves the loading time how much.

  3. Play with lazy loading. There are also two blog posts about it: http://blog.ionic.io/ionic-and-lazy-loading-pt-1/ + http://blog.ionic.io/ionic-and-lazy-loading-pt-2/ Measure the time, but also keep an eye on the file size as @reedrichards mentioned.

1 Like
#23

@Sujan12 Ionic 3’s lazy loading is bad for large apps

#24

Random blog post on the internet, has to be true :wink:
Seriously: Find out if it works for you.

#25

@Sujan12, @fdom and @reedrichards Please have a llok below screenshots.

I clone a fresh ionic repo using ionic start super --type=ionic-angular command.

It’s run successfully in my system and i also try to build release apk. It’s Strange it takes > 30 sec to boot app. :tired_face:

when i check inside network tabs i found something: please check vendor.js and load time also:

Here is my package.json (provided by ionic):

{
    "name": "tabs",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/camera": "3.12.1",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/google-maps": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "@ngx-translate/core": "6.0.1",
        "@ngx-translate/http-loader": "0.0.3",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.5.3",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.2",
        "@ionic/cli-plugin-cordova": "1.4.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.2",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

In short i haven’t change anything that is provided by ionic team although, why it takes too much time ?:scream:

#26

I guess the repo isn’t up-to-date. Check changelog 3.5.2 and add vendor.js to the index.html

Splash screen: 2 to 3 seconds. white screen: 10 seconds
#27

This is a starter that shows a lot of functionality, and is in no way optimized to be fast.
It is also not using Lazy loading for now by the way.

Test this with the blank starter to get the baseline relevant to your system.

#28

Once again,

After achieving lazy loading using ionic3 everything is working fine :slight_smile: but i saw that there is some component taking small time to initialize it self. during that time app shows blank/white screen or it renders automatically to rootpage for small time and after that it navigates properly. :rage: We don’t expect this things after migrate 10-12 app modules to IonicPage. If You have any suggestion please guide me.

And yes also facing issue with ion-icon and menuToggle while using preloading Concept of IonicPage. If i solve this issue i say that , now my app is ready for production mode.

Example Here:

<ion-header>
  <ion-navbar color="primary">
    <ion-toolbar>
      <ion-buttons start>
        <button ion-button menuToggle>
          <ion-icon name="ios-menu"></ion-icon>
        </button>
      </ion-buttons>
      <ion-title >
        <span>{{viewTitle | uppercase}}</span>
      </ion-title>
      <ion-buttons end>
        <button clear ion-button>
          <ion-icon name="ios-clock-outline" (click)="openTimelineModal()" style="font-size: 1.8em;color:white"></ion-icon>
        </button>
      </ion-buttons>
    </ion-toolbar>
  </ion-navbar>
</ion-header>

If i used menuToggle with button element. It doesn’t show toggle button in header.
but if i remove menuToggle from button element it shows button but as we expect it wont works.

Facing same issue

#29

Please open a new topic for your other issues that don’t concern boot time. Thanks.

#30

just try to run:

ionic cordova build android --prod --release

It will build/clean the app for production and the app will start much faster.

2 Likes
#31

Bro are you fix the blank/white screen issue after load splash i have got same issue my app load time is 8 to 11 sec max but while screen show for few seconds are you fix it?