Understanding Ionic initial payload size


#1

https://beta.ionicframework.com/docs/installation/cdn#using-ionic-from-a-cdn seems to be a very nice loader shim, that’s 3kB in size, and enables using all web components, which then apparently dynamically load themselves on demand.

Do I understand this correctly? This is the best way to just plug n play?

Alternative would be set up route-specific payload manifests, of some kind. Very inconvenient.


#2

Yes, components are lazy-loaded on demand the first time they are used :slight_smile:


#3

Thanks.

Is this loader mechanism extensible for lazy-loading non-Ionic web components as well? Where exactly do I look for this source code?


#4

The lazy loading of components come from Stencil, the Web Component compiler created by the Ionic team and used to export the components.

You can write your own web components with Stencil and have them lazy loaded in the same way: https://stenciljs.com/docs/component-lifecycle/#lifecycle-hierarchy


#5

Tyvm. I am still wondering about loading non-Stencil components… can I get them involved in Stencil lifecycle. I’ll definitely be poking around Stencil details next to find out more.

EDIT I guess a fully router-based approach is perhaps the alternative to mix different framework components?


#6

Not sure how a router can help mixing different components. Can you elaborate on what framework and components are you planning to use?


#7

#8

My understanding is that lazy-loading should be provided by this component library. I’m unsure if you could hack the Stencil loader to do what you want.


#9

Thanks for thinking this through with me. If you happen to discover something relevant in the future, please do ping me here, I have this thread subscribed every way possible.