Ionic 3, speed up boot time?

Ionic Framework ionic-v3
1

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
2

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
3

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

4

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

5

ā€“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
6

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

7

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.

8

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

9

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

1 Like
10

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

I use all the times --prod flag

1 Like
11

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
12

About loading time, I did some optimizations and got 200ms loading time.
Look at report Website Speed Test | Pingdom Tools

Good recomendations:
http://blog.angular-university.io/how-to-run-angular-2-in-production-today/2286
Creating A Pre-Bootstrap Loading Screen In Angular 2 RC 1

Our site is completely on Ionic2
I written tutorial on Optimizing Our Mobile Ionic 2 (Angular 2) App for Production

also some story on:

14

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
15

Thanks for sharing this! Cheers.

1 Like
16

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

17

works for me too. Thank you very very much.

18

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

19

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ā€¦

20

@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>

21

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');