How to Preload Specific Ionic Components in v4

We have an Ionic 4 app which is also being deployed as a web app. It’s nice that Ionic 4 lazy loads all of its components - it greatly reduces the bundle size. However we’re running into issues when it comes to user interactions that trigger lazy loaded components.

As an example, we have a button which triggers a Popover. When deployed as a website, there is a noticeable delay between tapping the button and the popover being displayed (as both the Ionic popover components and the component being rendered in the popover are lazy-loaded).

Once it has loaded once everything is fine but we are finding that the more impatient users are tapping the button several times because it looks broken and then several popovers all appear at once on top of each other.

We have tried using both service workers (via ng add @angular/pwa) and PreloadAll route preload strategy but neither seems to help with the above case. Is there a way - either via Ionic or Stencil - to mark certain components (like Popovers or Radio buttons, for example) as more important so that they can be eager loaded when the application first runs?

2 Likes

Hi~

I also have same problem like it and it really needs to preload specific ionic components
I thought my website was broken in first time but i realized soon it was just a problem of the lazy loading in ionic 4 so i thought i need to migrate my codes to spring boot but it might be hard so i have searched solutions for it for a few days but i couldn’t the solution

I think ionic 4 can’t be used for websites if this problem don’t have the solutions because the website seems really broken when people touched ionic components(ion-select, ion-datetime, …) at the webpage (Because web browser start to download chuncks like.js file for ion-select component from web server when user touched the part of ‘ion-select’ so user have to wait what the downloading will be completed but original HTML select tag dosen’t need to be downloaded)

I really hope there will be the solution for it!

Thanks for reading ^^

First things, I would have a look to the popovers. Double check your lifecycles (ngOnInit, ionViewWillEnter etc.) to see if there isn’t something which takes too much time to load from your app?

Maybe even to move code from a lifecycle to another (like something from ionViewWillEnter to ionViewDidEnter too. That might improve the UX.

If nothing work, yes with Angular it’s possible to preload only one or multiple selected modules, see following articles.

But first I would suggest to have a look and play with the lifecycles.

@reedrichards as mentioned in the original post I already tried PreloadingStrategy which did not help. Mostly because the popover is not a route - it’s a popover.

It’s definitely not onInit/viewWillEnter related as you can watch the network requests happening and the slow part is requesting the chunks for the various ionic components as well as the Popover Controller itself.

Well then no other idea. I remember that in the tool we are currently developing I faced kind of the same behavior but after having notably played with my lifecycles I was able to fix it.

Good luck

Thanks reedrichards,

BUT IONIC 4 components(ion-select, ion-datetime, ion-xxxx, …) can be loaded only when it’s requested (it’s a mechanism of IONIC 4) and you can confirm it through chrome network(F12)

BUT i want web browser download the ion-select component together in advance while downloading web page NOT when it’s requested ㅜㅜ

1 Like