Initial bundle size increased by 70kb when switching to @module-federation/enhanced/webpack

[GonchuB]

Describe the bug

We use https://www.npmjs.com/package/bundle-stats-webpack-plugin to analyze impact of changes in bundle size. When upgrading to module federation 2.0 we notice the initial js was increased by ~70kb

The only change we introduced is replacing webpack module federation with the new package:

- const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
+ const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');

Reproduction

https://github.com/GonchuB/module-federation-v2-external-repro

Used Package Manager

npm

System Info

System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 237.38 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.0 - ~/.nvm/versions/node/v20.19.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.0/bin/npm
    pnpm: 9.5.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 134.0.6998.118
    Edge: 111.0.1661.62
    Safari: 18.3.1

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[zackarychapple]

Can you double check with the hoisted runtime that is now default in 0.11.x

[GonchuB]

@zackarychapple updated repository to use 0.11.1, but yes, runtime bundle size is still ~67kb bigger

[ScriptedAlchemy]

You can use external runtime.
https://module-federation.io/configure/experiments.html#externalruntime
But overall someone is going to have to vend the 60kb.
If you find a solution to reducing the size of federation, you can send a PR (improving the ability to tree shake).

Currently its not a easy problem to solve.

Id also suggest checking a production build output as we do not optimize the syntax and it includes alot of comments if youre in development mode.

No Optimization, but gzip

Total size: 114.86 KB
Total gzip size: 23.4 KB (20.4% of original)
Total brotli size: 19.69 KB (17.1% of original)
Average file size: 38.29 KB

With terser optimization on your build:

Total size: 48.23 KB
Total gzip size: 13.48 KB (27.9% of original)
Total brotli size: 12.08 KB (25.0% of original)

So realistically, the entire system is 12kb

[GonchuB]

I’m going to close this one as it is not a bug. Will try to shave off a similar amount of js from our “initial” stats and see if my CI accepts mf v2

[ScriptedAlchemy]

the smallest i can produce locally is

Total size: 40.33 KB
Total gzip size: 13.29 KB (33.0% of original)
Total brotli size: 11.89 KB (29.5% of original)
Average file size: 13.44 KB

With some refactoring of the source code to do things like cache objects so we dont drill deeply into them many times like this.that.the.other.thing

const thisthatother = this.that.other

const thisthatother.thing.x
thisthatother.thing.y
etc, ill see if i can push some of these changes - but its micro optimizations to get it down to 11kb. In general, transfer size will be pretty small. Ensure you have terser configured, remove comments, mangle etc and it shuold be able to get down to around 40k uncompressed. Bundle stats isnt the best to analyze it, try rsdoctor.dev - the 100k looks like its reading the source code without any prod optimizations applied.

[GonchuB]

Yes we are using all of that in our production builds. The gate is still there to point out potential issues. I’ll do a closer-to-prod analysis of the actual implications in bundle size to try and get this through from our side.

I think the bundle size impact on perf will be minimal, as the asset loading is not limited by the runtime chunk (maybe just a bit more js being evaled)

I just need to “sell it” properly within my enterprise environment and not just hand wave the bundle stat check.

Thanks for looking into it, by the way

[sowtame]

in our basic project it uses more than 14kb gzip

And another question, why is it using cjs bundle?

[ScriptedAlchemy]

Because webpack plugin compiles to cjs with tsc so there's not a good solution to resolve the module correctly. The compile plugin uses resolve for runtime injection.

The runtime package looks old tho because we moved the builk of the core to runtime-core so runtime module should be relatively small