How can Increase performance on my Ionic3 Anguar4 app?

Viewed 3481

Now I am working with Ionic3, Angular4 android app. It is taking a while to load initially. I mean I got a black blank screen for few seconds.How can I speed up this and avoid the black screen?

5 Answers

I try to keep up-to-date a post about that subject on the Ionic forum, have a look to https://forum.ionicframework.com/t/app-boot-time-current-state-and-best-practices/

But right now, some keywords about your question would be, I guess

  • Use lazy loading: Lazy loading concept allows you to not load and not load all requirements of your pages and components at boot time. For example, really really summarized, if you've got a first page1 and a page2 which use componentA. Without lazy loading, everything gonna be loaded at boot time. With lazy loading, componentA not gonna be loaded at boot time because it's not needed for the loading sequence and will only be use later and therefore, you save a bit of time

  • check your code and the libs you use to spare size: Size of the app is the key. Bigger is your app, slower is your boot

  • check your statics assets: could you delete or compact images? could you delete fonts? or could you not embed fonts? again size is the key

  • do you use rxjs operators? recently it was announced a new way of importing them and therefore to let you only imports the one you need and not all operators, again, it allows to spare size

  • you could apply this thinking to other libs you use, like lodash or moment.js vs date-fns I guess. Do you import all the libs or only what you need? Think small is beautiful

I hope this helps ...

To improve the initial load, you must create your .APK with production configuration (if you haven't already).

To accomplish that, run the command on the command interface you are using, and accord to the OS you are targeting:

ionic cordova build android --prod

ionic cordova build ios --prod

Note the --prod part which is key to tell the ionic CLI to create a production .APK with all the improvements that it involves, like cleaning css files, remove unused fonts, and some extra optimization processes.

You can change the "build" for "run" to install the app directly into your device or emulator.

Hope this helps! Best regards

Obviously, you will need to profile your app and to see why it's slow (if it's indeed "slow"), but people generally use Splash Screen while loading the app, to avoid the blank screen.

Performance can be improved by breaking down your application into modules and follow lazy loading for the modules.

The blank screen comes because your Ionic app is in initial stage , i mean in build level. But when your produce this app then this blank screen never comes.

ionic cordova build android --prod --release

Use above command and solve your problem.

Related