Ionic 3, speed up boot time?

Just updated to the latest version of Ionic 3, and started a blank project, was just bothered that it takes a full 7-10 seconds for my app to boot on a Galaxy S4 Android 5.0.1.

And when I deploy my full-fledged app, it takes 14-16 seconds to load.

Is this normal? Or should I just stop supporting older devices such as S4?

Thanks.

1 Like

Did you build it with --prod flag? Otherwise there’s no AOT compiling, which makes a huge difference in comparison to JIT compiled apps.

2 Likes

I used --release and signed the apk, is that different from --prod? I seem to have some build errors on using --prod.

What kind of errors are you getting? Those could be some pointers to your slow startup times?

–release = tell cordova to sign apk for android play store
–prod = tell ionic build you want to use ahead of time and other stuffs to reduce the size of the bundle

5 Likes

ngc (–prod) is much stricter than dev mode. I would definitely work on fixing those build errors.

Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused
by using ‘barrel’ index.ts files.
Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using ‘barrel’ index.ts files.

[SOLVED] I just checked app.module.ts, and I have some mistakes on importing providers which are not declared on import.

@everyone. Tried on a clean blank project and --prod really makes startup boot up really 500% faster.

I think we can use ionic lazy loading conference app example as a benchmark.

Any updates on this?
My application still takes 8-9 seconds to start.

1 Like

Any news in with this? My app starts minimal 12s long. It is very bad :-/ .

I use all the times --prod flag

1 Like

Hi there,
I just start blank new ionic project (menu template), signed apk, installed on device and boot time with splashscreen is almost 10s.

Very, very bad :-/.

Any ideas to make it faster?

1 Like

About loading time, I did some optimizations and got 200ms loading time.
Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/9118

Good recomendations:
http://blog.angular-university.io/how-to-run-angular-2-in-production-today/2286
http://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-1.htm74

Our site is completely on Ionic2
I written tutorial on https://www.sherpadesk.com/blog/optimizing-mobile-ionic-2-angular-2-app-for-production

also some story on:

Hi guys lately I was struggling to get my boot time reduced. My app was taking around 13 to 16 secs to load. Which was really frustrating. I followed the latest ionic document’s suggestion: https://ionicframework.com/docs/intro/deploying/.

I did ionic cordova build android --prod --release.

As mentioned in the docs. this will minify the code. also as others mentioned here check you splash screen delay for me I have set it to 3 seconds:

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

After making these 2 changes my app launching speed dropped from ~15 secs to 4secs!!.
That was huge!!. might be helpful to someone struggling out there :slight_smile: cheers!!

9 Likes

Thanks for sharing this! Cheers.

1 Like

i love you!! xD. from ~20 secs to 3 or 4 secs.

works for me too. Thank you very very much.

Please you have to try and use lazyloading… That a very key issue

Also try to reuse component instead of creating new ones i.e levearge on your componenets.module.ts … i have used ionic going to a year and my clients never complains

Try not to take a whole web functionality into an app >> just important features that makes life easier for the user with JIT rules

Try this command:

ionic cordova build android --release --prod

and in your config.xml, set your splash screen time to complete 0

Your app will now boot in 3-4 seconds…

@mikethetechy hey please help me, am getting error when i run this ionic cordova build android --prod --release.
error is below :>
G:\ion\cam>ionic cordova build android --prod --release
Running app-scripts build: --prod --platform android --target cordova
[16:16:09] build prod started …
[16:16:09] clean started …
[16:16:09] clean finished in 15 ms
[16:16:09] copy started …
[16:16:10] copy finished in 1.33 s
[16:16:10] deeplinks started …
[16:16:10] deeplinks finished in 54 ms
[16:16:10] ngc started …
[16:16:37] typescript error
Type AboutPage in G:/ion/cam/src/pages/about/about.ts is part of the declarations of 2 modules: AppModule in
G:/ion/cam/src/app/app.module.ts and AboutPageModule in G:/ion/cam/src/pages/about/about.module.ts! Please
consider moving AboutPage in G:/ion/cam/src/pages/about/about.ts to a higher module that imports AppModule
in G:/ion/cam/src/app/app.module.ts and AboutPageModule in G:/ion/cam/src/pages/about/about.module.ts. You
can also create a new NgModule that exports and includes AboutPage in G:/ion/cam/src/pages/about/about.ts
then import that NgModule in AppModule in G:/ion/cam/src/app/app.module.ts and AboutPageModule in
G:/ion/cam/src/pages/about/about.module.ts.

Error: The Angular AoT build failed. See the issues above
at G:\ion\cam\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:237:55
at step (G:\ion\cam\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
at Object.next (G:\ion\cam\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (G:\ion\cam\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
at

G:\ion\cam>

Are are using lazy loading wrong.
Just what the Output says: “about.ts is part of 2 modules”.
Remove the Imports in your app.module.ts and push pages with their Name as a string, not as an object.

this.navCtrl.push('AboutPage');