Split output into multiple webpack chunks, is it possible?

[PieterBoeren]

(I tried asking this question on Slack, but no response there, and maybe this is a better place to ask this question, since it's more visible to others)

I'm currently working on investigating if I can switch my UI library to Kendo UI (React), however, they have a, let's call it "special", way of licensing which makes it incompatible with defining the libraries in the importmap (it does work, but you can't license it, which makes it not usable). So more or less my only option would be to just bundle the components with all single-spa applications, but this is a huge overhead.

I was hoping I would be able to split the bundle in multiple chunks to at least cache the overhead, but I don't get how to do this with the single-spa setup, I read the documentation (https://single-spa.js.org/docs/faq/#code-splits), but I don't get how to do it (the documentation also seems to be outdated, since it links to the "output.jsonpFunction" which doesn't exists anymore).

So is there any example on how to get webpack to output chunks for single-spa application (I know this is not ideal, but hopefully Kendo will fix the issue at some point)? To be clear, defining it as a webpack external does not work with this library.

[joeldenning]

I don't have time to do a full explanation right now, but the short answer is to use webpack dynamic import. See https://webpack.js.org/guides/code-splitting/#dynamic-imports

[PieterBoeren]

Thanks for the answer, I was hoping to do be able to output a vendors bundle etc, but this also works :)

[joeldenning]

See systemjs/systemjs#2328 (comment) for a more in-depth explanation