I am working with web components using stenciljs. Its great library for creating web components that can we re-use anywhere.I wondered how stencil compiler works. I mean when I create a build of any component its creating multiple folders inside dist and when we have to use the component we just need to add 1 or 2 file like following.(I used bit.dev to upload my component)
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module"
src="./node_modules/@bit/kishanoza.demo.accordian/dist/dist/accordian/accordian.esm.js">
</script>
<!-- <script nomodule=""
src="./node_modules/@bit/kishanoza.demo.accordian/dist/dist/accordian/accordian.js">
</script> -->
</head>
<body>
<accordian></accordian>
</body>
</html>
at the same time I tried same component using react but in react they are not creating multiple folder like stencil.
so here are the list of the folder that stencil create is dist folder
- cjs
- collection
- esm
- esm-es5
- accordian
- types and some index.js files
so my question is what is the use of all this folders. I concerned about this because when I collect all my modules in some micro front end app I don't want this much of folder for all the components.
so if I can understand the use of this I can debug and manage duplicate folders and code in my micro front end app.
any help is appreciated
UPDATE
I have check ionic and its build using stencil so when I make a build of hello word app in ionic and check www folder it contains all the componets's chunck which I have not used in my entire application.. its 3 MB !!!! why ionic import all component event if i am not using it ??
I have tried react its best in this cases.. just one file for each component when I add stencil component in react then same issue multiple files generating for one component for stencil only where else for react just one file :) isn't it so cool ? :)