4

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

  1. cjs
  2. collection
  3. esm
  4. esm-es5
  5. accordian
  6. 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 ? :)

Kishan Oza
  • 1,707
  • 1
  • 16
  • 38
  • "The shortform dist stands for distributable and refers to a directory where files will be stored that can be directly used by others without the need to compile or minify the source code that is being reused." -https://stackoverflow.com/questions/22842691/what-is-the-meaning-of-the-dist-directory-in-open-source-projects – Thodoxicate Oct 15 '19 at 10:42
  • yeah I understand the meaning of the dist folder .. but my concern is when I use 2 separate component in some comman micro app this all folder are still there in the build so just wanted to know the actually use so I can ignore not required files – Kishan Oza Oct 15 '19 at 11:09
  • AFAIK, only the main script and the namespace folder are downloaded by the browser - in your case 'accordian.js' and the 'accordian' folder. – G. Tranter Oct 15 '19 at 15:31
  • Thanks for your response @G.Tranter I am not aware how about how browser works in case of component can you share some of the knowledge so I can check by my self also :) – Kishan Oza Oct 16 '19 at 06:23
  • Use your browser's dev console. In Chrome you can look at the sources tab to see what is loaded into the document, and you can use the network tab to view requests. – G. Tranter Oct 16 '19 at 20:38
  • extending @KishanOza comment, basically you add only the main script to the DOM in your case 'accordian.js', and that script lazy loads the component's entry file in your case 'accordian.entry.js' from the folder accordian. So when you will look into the dev console you might see only the main script initially, component's file gets loaded when the component gets inserted in the DOM https://stenciljs.com/blog/how-lazy-loading-web-components-work – Bilal Alam Oct 25 '19 at 13:20

0 Answers0