Currently :external only supports creating a singular output, which in a multi :modules builds prevents webpack from doing any code splitting at all. It should be possible to bridge webpack type code splitting with the :modules system.
The attempt I made was emitting something like
//ext-index.js
// regular code to import JS packages used by base module
// must use ESM import, otherwise webpack doesn't split at all
import * as esm_import$thing from "thing";
shadow$bridge["thing"] = esm_import$thing;
// helper function to let webpack split out imports
shadow$bridge["module:mod"] = function() {
return import("./ext-mod.js");
}
// ext-mod.js
// only imports required by this module here
import * as esm_import$other from "other";
shadow$bridge["other"] = esm_import$other;
And then ensuring that the loader first executes the generated loader function and awaits the promise, before trying to load the actual CLJS modules.
I failed at getting this to work with the goog.module.ModuleLoader based impl. Given that the Closure Library is being deprecated it might be time to implement this entirely in shadow-cljs, which could then account for this.
Currently
:external
only supports creating a singular output, which in a multi:modules
builds prevents webpack from doing any code splitting at all. It should be possible to bridge webpack type code splitting with the:modules
system.The attempt I made was emitting something like
And then ensuring that the loader first executes the generated loader function and awaits the promise, before trying to load the actual CLJS modules.
I failed at getting this to work with the goog.module.ModuleLoader based impl. Given that the Closure Library is being deprecated it might be time to implement this entirely in shadow-cljs, which could then account for this.