How to choose how bundles are constructed ?

[sebastieno]

Hi everyone,

I'm using Stencil to package some components. The idea, for the customer, is to put the main component in his HTML and then use a Prop to tell which component has to be loaded (the customer does not need to known all components, everything is done by me). Everything looks ok but I have a question regarding how I can package the most efficiently my bundles.

Stencil offer me (automatically) two way to bundle :

• All in one => every components are package into a single file. But the file weight is over 1Mo when each components are arround 200ko.
• Each component in one file => this should be ok but I have a lot of "intermediate" components that are not supposed to be exposed, so it's not very usefull to have them in separate files.

I would like to tell Stencil which component should be bundled. For example, if my library contains 4 components, I would like to tell Stencil to package those 4 components + the main component, even if some "intermediate" components are included in many bundles.

I tried using 'dist-custom-elements' and rollup (I used the CLI to do some tests), I mostly succeed what I needed but the debugging experience is just awfull (the npm run start does work with the target bundling mechanism, etc.), and I didn't found example on the internet.

I was thinking to create a project for each component (and do copy task for "intermediate" components) to be able to have a single file per component and then create the main component which will load the others, but I feel this is not the right way.

Do you know how I can achieve my goal ?

Thx for your help !

[christian-bromann]

@sebastieno thanks for raising this question.

Stencil allows you to consume components in two ways:

• via lazy loading: here you embed a very small initialization script that registers all Stencil components and once your application wants to render this component, Stencil loads the code for it dynamically
• as standalone component: here you can import the component whenever you use it in your application, allowing to defer the bundling to a different compiler e.g. Vite.

I haven't seen Stencil compiling all components into a single file, are you sure this is using the Stencil compiler only? Nonetheless if you need specific bundling capabilities I would recommend to bundle your application with a different compiler as Stencil is really only focused and concerned with bundling Stencil components as described above. It doesn't provide additional bundle configurations.

Does this answer your question? Let me know if you have any further comments.

[sebastieno]

Hi @christian-bromann

Thx for your quick reply.

Ok I understand the global idea, I will check Vite to bundle my project exactly as I want.

For the single file compilation, when I use my main component in the index.html, the compilation generates only one big file. If I dynamically add my main component to the index.html (document.querySelector(...).innerHTML = ...), StencilJS switch to the "lazy loading" compilation as expected. I don't know if it's normal or a side effect.

Thx again for your help and your work !

[mvolkmann]

Did you work out a way to bundle Stencil components using Vite? I would also like to do that.

[sebastieno]

No we didnt took the time to check :/