Dynamically Load from different Bundles

[philcockfield]

The CodeSplitting (via the dynamic import() statement) is really nice.

However, I'm trying to think my way through an approach to progressively loading code (JS) from different bundles.

Is there a way to do this. The scenario is I have essentially a "vendor" type scenario, where I say have multiple bundles, which can progressively load code from other bundles over the network.

Is there an approach to this. The defactor import() code-splitting seems to assume this is all coming from the one module. What's my move?

Thanks!!! 🌼🍰

[mischnic]

I don't fully understand what you want to achieve, but with Parcel 2, the bundler plugin is in full control over how assets are grouped into bundles.

The defactor import() code-splitting seems to assume this is all coming from the one module

So you want an import statement that loads things from multiple objects at the same time?

[philcockfield]

Thanks @mischnic

So you want an import statement that loads things from multiple objects at the same time?

I'll draw up what I'm trying to do in a diagram to get this clear. It would be a powerful use-case so no doubt there's a way to do it with the new version. Back soon! Appreciate it @mischnic

[philcockfield]

OK, so I'm on y way to documenting this more fully, but as I work this out in my head I have in interim question that will help me get there.

Say I have two packages:

PackageA
  |-- index.ts    <== Entry
  |-- foo.ts      <== Dynamically imported module

PackageB
  |-- index.ts    <== Entry

PackageA dynamically imports foo.ts from it's entry, thereby creating a code split:

  const load = import('./foo');
  load.then(e => {
    console.log('Dynamically loaded module:', e);
    e.init();
  });

This results in the following bundled files in /dist:

PackageA/dist/
  - index.<hash>.js
  - foo.<hash>.js

---

Question

What I'm figuring out is how I can dynamically import foo.<hash>.js from PackageA into PackageB which is a completely different universe, using just a URL to locate the script.

Use-Case:**

PackageB doesn't now about PackageA (no-coupling) and is only given the reference to where the foo.<hash>.js resource is on the network, via the URL, in a late-bound dynamic manner. This complete decoupling allows many partial modules to be packaged in this way without the need to know about all future modules that may be built out over time and hosted in various different places.

More Concrete Scenario:

PackageB contains some kind of generic viewer module, and when asked to load the script, it inserts a <script> into the DOM and it spins up and integrates itself into the viewer environment (via some known entry hooks, which could be shared on the global window (at a pinch)...or something better if there is a more principled way of achieving this scenario.

---

My rough tests of just dynamically loading the script does nothing, so clearly that's not the way to achieve this.

  const script = document.createElement('script');
  script.setAttribute('src', '/foo.<hash>.js');
  document.head.appendChild(script);

Thanks @mischnic

[philcockfield]

Closing this out - what I was asking for here I now see detailed in the upcoming "Module Federation" designs in Webpack 5.

Now I can see this thinking laid mirrored in the direction of Webpack, wondering if something like this is on the drawing board for coming to Parcel?

[diamantatos]

so what is the answer to this? :P