How can Increase performance on my Ionic3 Anguar4 app?

Question

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?

Answer 1

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

Answer 2

通过将应用程序分解为模块并遵循模块的lazy loading ，可以提高性能。

Answer 3

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

Answer 4

显然，您需要分析您的应用程序并查看它为何缓慢（如果它确实“慢”），但人们通常在加载应用程序时使用启动画面，以避免空白屏幕。

Answer 5

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.