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:
Horizontal code splitting: Split between rows, based on the first set of arrows (i.e. making imports from entry => CSF async).
Vertical code splitting: Split between the second two columns, based on the second set of arrows (i.e. making imports from CSF => components async).
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.
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:
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.