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?
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)
@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.