Optimizing total bundle size

[rsreimer]

Hi

I am in the process of migrating a large Ionic Angular project from Webpack Module Federation to Native Federation.

When building the project for iOS and Android the total app size in bytes is important.

One way we optimize in the Webpack setup, is to remove shared dependencies from the bundle, that we know will never be loaded.
With Webpack we use the import: false sharing hint in microfrontends for shared dependencies that will always resolve to the shells version, such as singleton dependencies.
The import: false hint removes the shared dependency from the microfrontends bundle entirely.

I have asked the same question in the Native Federation v3 repo, where Manfred Steyer suggested to add the dependencies to externals: angular-architects/module-federation-plugin#873
If I add the dependencies to externals instead of shared, the dependencies are not included in the microfrontend bundle, which is what I want.
However, the dependencies are not added to the import map either, so the microfrontend can not load them at runtime.

Is there a way to configure a dependency as shared, but not included in the build output?

We could maybe delete the files in a post-build script, but that is not ideal.

[Aukevanoost]

Right! That sounds like a bug, the externals array is indeed meant to only mark dependencies as "import" but not ship them:

native-federation-core/src/lib/domain/config/federation-config.contract.ts

Line 18 in 11889d2

externals?: string[];

However, I generally recommend against this because you're risking a dependency on your host. When you mark them as external, the host cannot guarantee that the dependency will be present since this is a runtime check. Imho remotes should always be independent and provide their own fallback externals.

Nevertheless, if externals isn't working, this should be looked at.