Ionic-framework: Ionic app takes 16 seconds to start (startup time)

[touqeeraslam]

My ionic app takes 16 seconds to start , after splash screen of 3 seconds it atleast 13 seconds to start can you please help even it has only 10 to 12 no. of pages ??
It shows 3 seconds splash screen and then grey or white screen which remains 13 seconds and then my app starts ?

tried --prod several times during build

ionic cordova build android --prod

and also tried
cordova build android --prod
but still facing this issue please help

Ionic cli info
cli packages: (C:\Users\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.5
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.11.3
npm               : 3.10.10
OS                : Windows 10

Environment Variables:

ANDROID_HOME : C:\Users\AppData\Local\Android\sdk

Misc:

backend : pro

[kensodemann]

Hello! Thank you for opening an issue with us!

Reducing the startup time is a big focus of v4 with the shift to using web-components built with Stencil.

Are you using lazy loading?

The biggest issue with start time is going to be the size of the bundles. If your main bundle is large it is going to take the device a while to process all of that JavaScript. Angular itself can be huge, and if you are using a lot of other libraries that just compounds the issue so reducing the number of dependencies that your app has might help as well.

Thank you for using Ionic

[youssmak]

@touqeeraslam are you using crosswalk dependency ?

[touqeeraslam]

@kensodemann how my main size can be so large because the main issue is i have jst 12 pages in my app and using firebase streaming media native charts.js and paypal and mydatepicker?
for confirmation i created a new ionic start tutorial empty project and build its release and then tested it on deviice that took 5 seconds to load ???
and i m testing my current project from creating --prod because release build after deployment on device shows nothing but whitescreen ?? any idea about it ???-

this is my package.json file :

{
  "name": "IonicApp",
  "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": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/firebase-analytics": "^4.2.1",
    "@ionic-native/paypal": "^4.5.2",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic-native/streaming-media": "^4.5.2",
    "@ionic/storage": "2.1.3",
    "angularfire2": "^4.0.0-rc.0",
    "card.io.cordova.mobilesdk": "^2.1.0",
    "chart.js": "^2.7.1",
    "com.paypal.cordova.mobilesdk": "^3.5.0",
    "cordova-android": "^6.3.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-firebase": "^0.1.25",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-streaming-media": "^1.0.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "firebase": "^3.9.*",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "mydatepicker": "^2.6.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.5",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-firebase": {},
      "com.paypal.cordova.mobilesdk": {},
      "com.hutchind.cordova.plugins.streamingmedia": {}
    },
    "platforms": [
      "android"
    ]
  }
}

[touqeeraslam]

@youssmak No i m not using crosswalk

[kensodemann]

@touqeeraslam - have you verified that the bundle version is significantly larger in your app than it is in the starter that loads in 5 seconds? I don't see that you have compared the file sizes.

A few thoughts:

• whether or not the bundle size will be significantly different depends on how much code you have in those 12 pages, the starter is pretty minimal
• even if the size is not too much different, there could be a difference in the complexity of the JavaScript needing to be loaded and parsed by the phone
• have you used a tool such as source map explorer to analyze your bundles?
• it may not be bundle size / JavaScript complexity at all, perhaps your code is doing something on startup that is blocking
• it sounds like you are saying that if you compile in --prod that it just whitescreens, have you tried remote debugging via Chrome to see if there is anything being output to the console or to see exactly what the app is doing at the time?

[touqeeraslam]

Today i created a release build for IOS and Android after running my app on devices it shows nothing but white screen and shows nothing almost i waited for 20 minutes but it was only screen there but if i don't create a release build if create only --prod build then white screen remains for 12 seconds then my app works fine
-there is not a huge code or huge functionality in my app no. of lines in one page is not more than 200 lines
-can you please explain how to check the bundle size
-and i never used source map explorer

[kensodemann]

-can you please explain how to check the bundle size

• ionic build OR ionic build --prod, just be sure to use the same args on both projects
• cd www/build (Mac or Linux) cd www\build (Windows)
• ls -l *.js (Mac or Linux) dir (Windows)

Not overly sure on the Windows commands. Hardly ever use it.

-and i never used source map explorer

You should give it a try. I find it very helpful. Especially true on the vendor.js file. It lets you know if you are doing something bad like bringing in all of rxjs instead of just the bits you need or some such thing as that.

[touqeeraslam]

Thanks for replaying i sloved this issue by updating the angular 4 to angular 5 .

[kensodemann]

Excellent. I am going to close this issue then.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.