When it is ok to use static import with federated module

[matthewma7]

I saw that the useServiceContext in the shared-routing is using normal static import. My code has extensive code splitting and stuff and turns out I can even use static import for my federated React components! However, changing the import in the basic example to static import won't work.

So, I am wondering under what circumstance it is ok to use static import with federated module?

---

Update: the basic-host-example actually can use static import as well, I might have mistaken. Just like @ ScriptedAlchemy answered below, it's a performance consideration, not webpack module federation requirement.

[ScriptedAlchemy]

You need to have a dynamic import somewhere in the parent to leverage static imports. This works by hoisting additional chunks to the nearest parent async import. This is how we can provide them in a sync manner, by moving them somewhere that we already have a promise pausing execution. If you use a dynamic import for bootstrap.js, usually solves the issue.

[matthewma7]

Thank you for the answering. 🙂 Can I say, if handled with care, it is possible to use module federation with just static import like before?

I am not super clear that you said 'If you use a dynamic import for bootstrap.js, usually solves the issue'. The example is using dynamic import for the bootstrap.js but the React.lazy and Suspense is still needed in the case?

[ScriptedAlchemy]

Lol okay sorry.

Here we go

As long as you have async bootstrap import, or a parent import, you can use static import without a problem.

It's not "bad" but you will be loading more code upfront in order for that chunk to start.

I always say use dynamic import when possible because it's better for code splitting. We don't have to load as much code in the parent chunk.

Using static imports is sometimes necessary. React hooks for example. Those we can static import because it's hard not to.

But where async can be used, we want to use it. So that we are not creating giant amount s of remote code be downloaded because everything is going back to the top bootstrap import.

The bootstrap import itself is only in all my example because everything needs react to start. So there's not much else to go in the entry point other than importing react.

If you're entry-point contained no static import of a shared module, then you can code as normal. Just make sure to dynamic import the bootstrap file when you want the shared modules to start.

Is that a better explanation?

Many static imported federated modules would be bad practice- not problematic for webpack. Just not what we advise for heavy use (perf)

[lzxb]

The route on the page is provided by other remote modules, so static import will be used. Now the project in the production environment will cause a lot of requests, and those unused modules will be requested. I don't know why

[ScriptedAlchemy]

Static imports, used or not would be loaded since they are eager imports.

[lzxb]

Oh, I see