bug: Loading app resources is slow only on Android

[MarnickvdA]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

When running my app on Android, the chunks are lazy loaded when they are needed, although the strategy is PreloadAllModules. First, I thought this was a problem which required me to add the Angular service worker, but with the default configuration provided by the Ionic documentation it still did not work. (On Android with capacitor, http request don't work either so I added a fix as can be seen in the MainActivity.java).

In my app, I have multiple modules with routes (authorization module, tabs module, detail modules etc.) but when navigating from for instance the login page to a tab page the javascript chunks are loaded when starting the NavController navigateRoot. I did not expect this behavior because the modules are preloaded right?

This behavior only happens on Android. iOS works fine.

Expected behavior:

I expected smooth and fast navigation between pages on Android, similar to the speed of an iOS flavor.

Steps to reproduce:

Related code:

I created a starter template repo configured with the service worker, as I did with my real app.

Clone this repo

npm install
ng build --prod
npx cap sync && npx cap open android

# Run the application on a native device

Capacitor will print a lot of requests to get the files D/Capacitor: Handling local request: http:/localhost/**

Other information:

I got the Android service worker bugfix from here

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 9.1.7
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0
   @capacitor         : 2.1.2

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   NodeJS : v13.8.0 (/usr/local/bin/node)
   npm    : 6.14.5
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. What device are you testing this on?

[MarnickvdA]

I am testing on a Xiaomi Mi A3 with Android 10

[liamdebeasi]

Thanks for the follow up. Can you clarify what you mean by "slow"? All Ionic components are lazy loaded by default. Setting PreloadAllModules in Angular only preloads your routes, not the Ionic components.

[MarnickvdA]

Thank you for your reply. With slow I mean that it takes around 5 seconds for the initial page to load (after I hide the splashscreen on the platform.ready. Every time I navigate to a new page with Ionic components they need to be retrieved at that time, which takes another 1 or 2 seconds.

If PreloadAllModules only loads the routes, how can I preload the Ionic components? I have read some articles on several websites but I cannot find a decent explanation/example of how to implement such logic.

I was also wondering why the components only load slowly on Android, while components load almost instantly on my iOS device (iPhone 10s).

[liamdebeasi]

Here is an example of how to pre-load components:

Example of a preloaded toast: https://codepen.io/liamdebeasi/pen/pojZqWX
Example of a non-preloaded toast: https://codepen.io/liamdebeasi/pen/ZEbjVXE

In each example, try loading the CodePen and throttling the Network speed in Chrome DevTools. Then clicking the "Show Toast" button. In the non-preloaded example you should get an error, but in the pre-loaded example the toast should display properly.

In addition, you can also cache the lazy loaded files using a service worker. Can you try this and let me know if it helps at all?

I tested your app on my Moto G4 (Android 7) and did not run into any of the performance issues you noted. My app's startup time was about about 4 seconds, and switching tabs was almost instant (I am using Capacitor).

edit: When building my app for production npm run build --prod my app's startup time dropped to 3-3.5 seconds.

[MarnickvdA]

Well, the good old turning the device off and on again worked to fix the performance issue. I still have no clue what exactly caused it. I guess this issue ticket can be closed.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.