tmeasday / storybook-skeleton

3 stars 1 forks source link

Vertical code splitting #16

Closed tmeasday closed 3 years ago

tmeasday commented 3 years ago

Add an option VERTICAL that splits on the CSF => component boundary.

Note re: naming -- if you imagine the components as rows and the columns as the require heirarchy, the names vertical and horizontal code splitting follow:

     /=> Button.stories.jsx => Button.jsx
entry => Header.stories.jsx => Header.jsx
     \=> Page.stories.jsx   => Page.jsx

There are technical difficulties with both approaches (which I won't discuss here), but for the purposes of the skeleton we are very interested in the performance of the 4 combinations (no splitting, horizontal only, vertical only, both).

One of the technical obstacles with vertical code splitting is needing to rewrite CSF files into import their dependencies async. This PR includes a regexp based POC CSF loader which does just that. It also includes non-horizontal-code-split entry points (using regular require.context) for each project.