When it is ok to use static import with federated module about module-federation-examples HOT 6 CLOSED

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)

from module-federation-examples.

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.

from module-federation-examples.

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?

from module-federation-examples.

from module-federation-examples.

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

from module-federation-examples.

Oh, I see

from module-federation-examples.