Ionic-app-scripts: rc5: slow startup time android

[mhartington]

_From @doender on January 12, 2017 15:54_

My Ionic2 RC5 application is loading very slow (20-25s) on Android 4.4.2 (Samsung Galaxy S4), whereas earlier versions were way faster. iOS startup is very fast (2-3 seconds)

I reinstalled the Android platform and made a production build:
ionic run android --prod --device

ionic info:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

What can I do to improve this?

_Copied from original issue: driftyco/ionic#9993_

[mhartington]

Just to test this out, could you just run ionic run android --prod?
Also, post the output from npm ls @ionic/app-scripts

[mhartington]

_From @doender on January 12, 2017 16:21_

@mhartington Still the same with ionic run android --prod
The output is @ionic/[email protected]

[mhartington]

Hmm, what does the output from npm run build --prod say?

[mhartington]

_From @doender on January 12, 2017 16:40_

> tutorial@ build IonicApps/platform-player
> ionic-app-scripts build

[17:39:00]  ionic-app-scripts 1.0.0
[17:39:00]  build prod started ...
[17:39:00]  clean started ...
[17:39:00]  clean finished in less than 1 ms
[17:39:00]  copy started ...
[17:39:00]  ngc started ...
[17:39:12]  ngc finished in 12.10 s
[17:39:12]  webpack started ...
[17:39:18]  copy finished in 18.32 s
[17:39:19]  webpack finished in 7.72 s
[17:39:19]  uglifyjs started ...
[17:39:19]  sass started ...
[17:39:21]  sass finished in 1.59 s
[17:39:21]  cleancss started ...
[17:39:22]  cleancss finished in 1.29 s
[17:39:36]  uglifyjs finished in 16.61 s
[17:39:36]  build prod finished in 36.44 s

[mhartington]

Nothing stands out here. Lets move this to driftyco/ionic-app-scripts for now though

[TdyP]

Any clue about this issue? I'm experiencing the same latency at startup on RC5 with latest version of ionic scripts. Splash screen, then white screen for about 8s before the app is fully loaded
Loading is very quick on any emulator (with Genymotion), but very slow on any real device.

Build was made with ionic build android --release

I'm using SQLite for data storage, if that may help.

I'm keen on investigating further on my side, how can I know what's going on during this white screen?

Thanks!

Ionic info:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.3.0
Xcode version: Not installed

[edemirkan]

A similar issue was also reported for rc.4 and closed later on. Might be a regression.
https://github.com/driftyco/ionic-app-scripts/issues/596

[Chris1234567899]

Same experience here on Moto G2 with Android 6. Even a blank project needs 15-20s to start.
Updated from rc2 where it was rather quick to rc5 now and facing this issue...

Not sure if it is connected to this, but I faced also a timout issue "connection to server was unsuccessful (file:///android_asset/www/index.html) as described for example here: https://forum.ionicframework.com/t/application-error-the-connection-to-the-server-was-unsuccessful/67584

I could solve that by adding
<preference name="loadUrlTimeoutValue" value="700000" />

So I think it might have something to do with the long startup time.

[mhartington]

Please make sure you are running the builds with the --prod flag that was introduced in app-scripts 0.0.47

https://github.com/driftyco/ionic-app-scripts/releases/tag/v0.0.47

[TdyP]

I did ran the build with --prod flag : ionic build android --prod --release but I still have the slow startup.

[mhartington]

it's a bit a of vague issue. Have you done any debugging? What part is slow? What version of android are you targeting? What version of cordova-android is being run?

I test on a old moto phone running 4.4, and with a prod build running the conference app, I have a startup time of around 2-3 second

[TdyP]

I don't know really know how to debug this part of the app as it's the Ionic core loading.
The app is opening, the splash screen is showing for a few seconds (2-3s), and then I have a white screen for 8s before the app actually shows up.

A cordova -v shows me v6.4.0.
I tried myself on a Android 6.0 (HTC One M8 and Huawei P9 Lite). Got some feedback from users experiencing the same issue, don't know about their device. It's always fast on virtual devices on any Android version

I'm really keen on investigating further but I don't really know where to dig. If you could just give some hints on how to get more informations about what's going on during this white screen, I'll try to find out the issue.

Thanks

[Kobzol]

@mhartington could you please post accurate time that you got on the Moto? I'm getting exactly 5 seconds with the conference app on 6.0 Sony Z3 Compact.

[uj]

Similar issue here on Android. Even going to the homescreen (with hardware home button) and then going back to the app takes significantly longer on RC5 than it does on RC4. The only difference is the RC4/RC5, no code changes.

[64jcl]

Same issue here with RC5. After splash screen goes away I have 6-7 seconds of white screen before the first page comes up. Previously with RC3 it took perhaps 1-2 seconds after splash screen was gone.

Btw in my app.component.ts I have the following:

    this.platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();
    });

Does the code actually reach the Splashscreen.hide(); when the splashscreen goes away or is it the option in config.xml that controls the time its showing?

<preference name="SplashScreenDelay" value="3000" />

Edit: Well it does execute it as that is a cordova call which in normal ionic serve would show on the log that cordova is not available. But I am suspecting the splash screen goes away way before it reaches that call.

Btw, I did test the basic ionic start test application and that certainly has lower device ready time so the "deviceready has not fired after 5 seconds." warning doesn't come up - but even that barebone app reports over 1000 ms for device ready. I am suspecting it might be @ionic/storage init that bogs things down in our current application.

[TdyP]

Managed to fix issue on my case.
I realized that, even with --prod flag, it was actually running a dev build:

$ ionic build android --prod
> open_score@ ionic:build /media/data/dev/openScore
> ionic-app-scripts build

[14:53:59]  ionic-app-scripts 1.0.0 
[14:53:59]  build **dev** started ... 

After some investigation, I found out that the scripts section of my package.json was not good (probably a legacy from older RCs that I missed to update). So I copied this from the conference app:

  "scripts": {
    "build": "ionic-app-scripts build",
    "clean": "ionic-app-scripts clean",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  }

Now the --prod makes its job and run a prod build. I then tested it on my device and the startup is now lightning fast! :)

So, if you're facing this issue: start by making sure you're actually running a prod build when using --prod flag.

Hope this helps :)

[64jcl]

Well mine is building prod it seems, however when I migrated to RC5 and app scripts 1.0.0 I remember being told that main.dev.ts and main.prod.ts was obsolete and that I should only have one main.ts.

My main.ts looks like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

I assume that is correct? At least that is also what the ionic start test app also contains now. So I would guess that what those two ts files did before is now happening "behind the scenes" depending on build? Kinda hard to know exactly whey these platform changes happen and how to handle project upgrades to newer versions of everything. Anyone got a good source/blog for this info?

[mhartington]

Yes, the main.ts for production builds will be generated on the fly during production builds
A good source of info, is the app-scripts Changelog file, which we update every time there is a new release, and make notes of any breaking changes

[Kobzol]

@TdyP could you please measure and post the time it takes to start your app? (from clicking the icon to seeing the loaded UI of your app)

[TdyP]

It takes about 5s overall. Was more about 13s before

[Kobzol]

I'm glad to hear that it improved for you, yet 5 seconds is still eternity for an app launch :-( I hope it will improve in time.

[mhartington]

yes, we do plan on improving this. Making things load lazily, and removing excess code that is not used in an app.

[padmini-grmtech]

my app is loading in 5sec in [email protected] after updating which was 13 to 14sec before..Can i decrease further more.i have optimized the code and removed unnecessary code.

[coolman7]

I think an app using cordova may not open less than 5 seconds. If an app requires 2-3 seconds of opening time, native approach might be a better solution.

[padmini-grmtech]

native approach meaning? can u explain me further please.I am not using any of the plugins which uses camera or others. i am using sqliteplugin for local storage,highcharts,splashscreen.nothing more plugins.

[coolman7]

I mean java, objective c, or any Project not using cordova such as react native.

[padmini-grmtech]

ok.You are saying that app using cordova cant be loaded less than seconds in latest versions of android.

[coolman7]

Correction: I tested with empty project with cordova with no plugins. It starts in 1 seconds. I added several plugins to cordova project but don't use these plugins. I starts in 2 seconds. So ionic or plugins should increase startup time. On the other hand I started another project with react native. it starts much faster than ionic 2.

[padmini-grmtech]

u mean my plugins are making my app slow down...

[coolman7]

blank ionic 2 project can take about 5 seconds to startup. additional plugins may increase this time.

[padmini-grmtech]

ok. once i installed the app,then i close it.When i reopen still the app is taking same time 5sec.is that correct,because it is installed it has to open in no seconds.Am i wrong here?

[coolman7]

correct

[padmini-grmtech]

what should i do for reopen app in milli seconds

[coolman7]

don't use ionic 2.

[padmini-grmtech]

i cannot do that my app is already live.can anyone suggest me other solutions.

[MichaelHuy]

On android device, first time loading is too long, around 7s. Tested on my Mobistar and tablet.
Hope that we can improve it to around 3s.

[touqeeraslam]

I just created a helloWorld release App on ionic2 using cordova 6 but its startup time is slow 5 secs and on my required app this is 8-9 seconds how can i reduce please guide.

[IgorGanapolsky]

Any solution to this? My app uses Ionic, and the rendering of the Activity elements takes 5 seconds.