Ionic-framework: feat: Request Specific Components be Eagerly Pre-Loaded

[zbarbuto]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request

Note There was some discussion around this feature request here:

https://forum.ionicframework.com/t/how-to-preload-specific-ionic-components-in-v4/170141/6

Ionic's lazy-loading of every single component has a tendency to make the app appear slow and unresponsive when deployed as a web app - particularly on slower networks.

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.

Describe Preferred Solution

Some sort of configuration at the app level of ionic:

IonicModule.forRoot({
 preloadComponents: [
  IonButtonComponent,
  IonPopoverComponent,
  MyPopoverContentComponent]
})

Describe Alternatives

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 (with service workers the popover still gets downloaded again when requested).

[kirillgroshkov]

Same issue for us! We have solved and successfully using Angular Route preloading, but preloading of Ionic components is still missing.

We're playing with workaround of just adding component tags to app.component.html (e.g <ion-virtual-scroll></ion-virtual-scroll>). But I haven't measured yet, probably it defeats the purpose of preloading and delays the initial load instead (since it's app.component.html that loads all the time).

So we very much need this feature! Or, a way to just bundle these ionic components into main bundle. It looks very wrong that loading 2Kb small ionic component delays opening the tab by very long time (~1 second), while just bundling it would eliminate this issue completely.

ps: Workaround of adding html tags to app.component.html doesn't solve preloading of Modal js chunks, currently the first open of modal is even slowed (+~2 seconds), cause it loads 3 small chunks: backdrop, modal and smth else (Segment?..). Bad UX for our users definitely.

[johnstontrav]

We are having the same issue. Using Ionic PWA in offline mode will never work without preloading the Ionic components.

Hard to believe the Ionic team didn't try adding a simple ion-select or ion-textarea (for example) to a starter app, hit offline mode in dev tools and see the issue.

We pushed very hard to our clients about the benefit of Ionic and PWA, but offline bug has really cornered us at the moment and we really need a work around. Desperately seeking any advice to help us.

Cheers,
Trav.

[zbarbuto]

Perhaps we would need to make a custom ionic build from the Stencil side as that seems to be where the code splitting and lazy loading happens - @manucorporat or @adamdbradley could you maybe provide some insight as to whether this would have to be done from the Stencil side instead?

[jwbeech]

We have been struggling with this very issue too, especially with menu based modals. The UI appears to hang badly. I have spent many hours trying to find a hack / workaround in the ionic source code with no luck. Right now we have to have small preloaders on all the async loading actions where there are additional loads.
Any feedback on a solution for this would be greatly appreciated.

[zbarbuto]

If this ever gets merged it will potentially solve the issue:

https://github.com/ionic-team/stencil/pull/1558

[manofspirit]

We are building Plugins using Ionic 4 (Pure HTML/JS and Vue) and facing simular issue. It'd be really great if Team Ionic provide a way to prefetch the components.

[liamdebeasi]

Thanks for the feature request. I am going to close this as this is not something that should be handled by the framework. If https://github.com/ionic-team/stencil/pull/1558 gets merged, Ionic Framework will be able to integrate with it, but the framework itself should not provide its own custom pre-loading solution.

In the meantime, you can pre-load components by placing the components in your app with display: none. Here is an example:

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, click the "Show Toast" button. In the non-preloaded example, the toast should be slow to load, but in the pre-loaded example the toast should be displayed almost instantly.

Additionally, you can cache Ionic's JS files using a service worker which will help speed up loading time. If you are using Angular, there is a guide on how to get started with this: https://angular.io/guide/service-worker-intro.

Thanks!

[ionitron-bot[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.