Stencil: option to disable lazy loading

[coryrylan]

I'm submitting a:

• [ ] bug report
• [x] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

I left a discussion about this in the slack as well. Heres what I posted there:

The angular cli uses just module imports, so custom webpack is a no go unfortunately. For our Angular SSR and redistribution of components for other teams the lazy loading is a no go. We are having issues with SSR because all the JS must be statically available at startup of the Angular app. We might be able to find some kind of workaround.

We have vanilla web components and those are easy to distribute and import into other projects. Just simply import the component as a es6 module. ex: import '/our-internal-lib/datepicker'; Doesnt matter if its React or Angular. The lazy loading by default is definitely awesome for perf but a bit opinionated for some of our setups and making it harder to share internally across various projects right now.

Heres a common scenario I have seen, I have to build primitive <basic-datepicker> component. This has to be packaged up and shared across 5 different products. Each product team uses that as their base datepicker to wrap and add custom functionality and redistribute to all the sub product teams for each individual product. So we end up with n to many new product-datepicker style components. Lazy loading down at the primitive level is not ideal. We want that at the application level or in some cases with SSR not at all. Hope this kinda makes sense. Thanks!

[adamdbradley]

Lazy loading individual components is the default, but you can still group them together as one option. In the future we'll also generate stand-alone web components without lazy loading which I think would help you out here. Also, you can still import the base component and extend it and do whatever you'd like. And we're finishing up a webpack plugin that will help out here too that'll make it easy to include stencil.

What we felt was important from the beginning is that it all can be lazy loaded and had an architecture that works without build tools. Stencil works great with build tools and large scale applications, but there's also something to be said about just dropping a script tag into any static html page and you've got access to all of ionic. This also includes being selective of which css to load per the user's configuration (ios/android/desktop/etc). So you can important stencil into react/angular/vuejs/apps-with-webpack, we'll have a webpack plugin soon, you can extend just the ES6 class, you can bundle as many of the components as you'd like into one file, all of the components can lazy load on demand, and you will be able to load them stand-alone. Hope that helps answer the question, thanks

[priand]

@adamdbradley Do you have an example, or an how-to guide, showing how to group components and disable lazy loading? Our use case is a bit different from @coryrylan's: we'd like the painting of the web components to happen at the same time than the other html tags first painting. When using lazy loading, the components painting happens a bit later, thus generating a visual flash and a page re-layout. We don't have such an issue with vanilla web components loaded synchronously with a script tag in the page. Does that make sense?

[mcelotti]

Hi, I'd like to disable lazy loading too, here's why: https://forum.ionicframework.com/t/disable-handle-lazy-loading-for-pwa-with-ionic-core-stencil-workbox/159467
Any hint or help is really appreciated, thank you!

[claytongulick]

I'm using lit-html and pure vanilla js, and having a pretty hard time making it work well with ionic lazy loading, for my application startup time isn't a huge deal, so I'd definitely like to see a way that I could easily disable lazy loading and import the components via webpack directly. I've been having a hard time finding much guidance on using ionic 4 with vanilla setups, and I have a frakenloader that loops waiting for ionic to hydrate:

 let ion_app = this.querySelector("ion-app");
        //wait for ionic to load
        let loading_interval = setInterval(
            async () => {
                if(!ion_app.componentOnReady) {
                    console.warn("ionic not loaded, delaying 10ms...");
                    return;
                }

                clearInterval(loading_interval);

                await ion_app.componentOnReady();
                this._ready_resolve();
            }, 10
        );

        await this.ready;

This is sub-optimal, for sure.

[jainanuj0812]

Do we have got any solution to overcome this? We are facing this issue, while the application load the screen flickers, which is quite frustrating.

[Chibionos]

Really need a solution for this problem, we have hit an issue and cannot resolve it. The flickering of the components are very disruptive.