I want to create a reusable web components library made with Lit. These elements will be used with React, Angular, Vue and other framework as well. Now there is a problem, I am bundling these components using webpack and it is generating bundle file of each component in "dist" dir. I want this lib to have lazy loading feature. Like, I am using button only its bundle file should be requested over network.
The user have to just include my lib in the project, user will be able to use these components. Only the bundle of those particular web components which has been used should be called.
I have used stencilJS as well. In its config file, I have used:
{
type:dist,
esmLoader: '../loader'
}
bundles:[
{components:['component-one']},
{components:['component-one']}
]
Using this in Stencil we can have individual bundle files of each component which type: dist handles lazy loading & it also have the entry file.
Similar thing I want to implement using Lit. This means consumer should not have to worry about lazy loading in react, angular. It should be handled in the lib (Lit).