SFPX Code splitting very hard if not impossible

[stevebeauge]

I work for a company that ship products which contains several SPFX components (Webpart, customizers, ...) and external applications (Office addins, SPA, ...).

All these apps should share common components and utility code.

I found that SPFX toolchain make code splitting very difficult (or not documented?). I build monorepo for splitting my code into several packages

While simple utility "packages" are easy to manage, thanks to typescript composite flag and project reference, it became very hard when coming to shared react component, especially if you want to have these components styled using the css module pattern and if it contains localization.

My researches (several days trying to reverse engineer SFPX build chain) results in these comments :

• SPFX library is not an option, because, as stated in the documentation, side by side version is not supported, thus making progressive upgrade of site collection not possible (upgrading one by one site collections)
• looking at popular SPFX component library (pnp react control for example) actually produce a spfx "project". It contains a lot of tooling scripts that make reproduction hard if bootstrapping a new library.
• The only found way to build sfpx component library is to build spfx project. I tweaks the gulpfile.js file to remove unwanted tasks, but it's a black box hard to play with
• Developer experience is awful. While serving (or fast-serving) for the "leaf" project is working quite well, everytime code in a dependency is updated, I have to stop the dev server, build the libray and start again the web server
• Debugging is also awful, because serving the "leaf project" only expose webpack source mapping for the project itself. imported packages are seen as transpiled javascript

To summarize, I'd like to have :

• workspace root
  • spfx-apps
    • webpart 1
    • webpart 2
    • list customizer 1
  • web apps
    • teams addin 1
    • office addin 1
    • web site
  • packages
    • utility 1
    • components 1

....

But I didn't find a "simple" guidance to achieve that

thanks for advise

[stevebeauge]

PLayground on https://github.com/stevebeauge/spfx-monorepo-sample (multiple branches for my multiples attempts)