Lazy-loading components

[muratcorlu]

Currently, our main file in CDN fetches and registers all of the components immediately. It's also possible to hand pick components by users to only download and use them like:

<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.0.0-beta.14/dist/components/button/bl-button.js"></script>

But the idea in this issue is to check the possibility and feasibility of lazy loading components dynamically once they are used in the DOM. In this case, user will just include the main file (or another main file for the lazy loading approach) as always. But this time, instead of downloading and registering all of the components, the library will register a placeholder component for all of our components. And this placeholder component will load the actual one in its connectedCallback method. In theory, this will prevent downloading most part of the library on landing pages since, most of the time, a single page use a small part of the all components.

But there are some points we need to consider here:

• This may cause FOUC issues. All components will be rendered with a placeholder component first, and then the real component will be rendered. During this execution, UI may flick.
• For some cases, network waterfall would not be preferable over hand-picking components. Probably lazy-loading should always be optional

[muratcorlu]

If we decide to implement a feature like this, we can get some inspiration from HMR plugin of @web/dev-server. This plugin uses JavaScript Proxy classes as placeholder components.

[muratcorlu]

Shoelace has this functionality since v2.3.0 with the experimental "autoloader". It tracks DOM changes with MutationObserver and loads components if it sees any new html element that has a tag name starting with sl-. More details: https://shoelace.style/getting-started/installation#cdn-installation-easiest

I'm not sure if this is a good approach though.