perf: add tree shake markers to enable/disable capabilities to reduce bundle size #3704

ScriptedAlchemy · 2025-04-16T08:57:12Z

Description

This pull request introduces several enhancements and optimizations to the Module Federation Plugin and related packages. The main changes focus on improving configuration capabilities, optimizing build processes, and adding environment-specific handling for certain functions.

Enhancements and Optimizations:

Module Federation Plugin Enhancements:
- Introduced definePluginOptions to manage DefinePlugin settings.
- Added FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN to handle disabling snapshot optimizations.
- Implemented environment target detection (web or node) based on compiler options and experiments.
- Consolidated DefinePlugin application with the newly constructed definePluginOptions.
Environment-Specific Handling:
- Declared ENV_TARGET constant to differentiate between 'web' and 'node' environments.
- Modified createScriptNode and loadScriptNode to execute only in Node.js environment, throwing an error if attempted in a non-Node.js environment. [1] [2] [3]
- Added logging for debugging purposes.
Build Optimization Options:
- Introduced optimization options in ModuleFederationPluginOptions, including configurations for disableSnapshot and target environment optimizations. [1] [2] [3]
- Added conditional functionality for snapshots and optimized entry loading.
Documentation Updates:
- Updated documentation to include new optimization options and their impacts.
Code Refactoring:
- Extracted duplicated logic for handling remote entry loaded into handleRemoteEntryLoaded function. [1] [2] [3] [4]
- Simplified plugin loading logic to check USE_SNAPSHOT flag. [1] [2] [3]

These changes aim to enhance the flexibility and performance of the Module Federation Plugin by providing more granular control over build optimizations and environment-specific behavior.

Related Issue

Types of changes

Docs change / refactoring / dependency upgrade
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)

Checklist

I have added tests to cover my changes.
All new and existing tests passed.
I have updated the documentation.

netlify · 2025-04-16T08:57:30Z

✅ Deploy Preview for module-federation-docs ready!

Name	Link
🔨 Latest commit	`e45311b`
🔍 Latest deploy log	https://app.netlify.com/projects/module-federation-docs/deploys/68266ea7c8961d0008781bba
😎 Deploy Preview	https://deploy-preview-3704--module-federation-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

ScriptedAlchemy · 2025-04-16T09:21:30Z

Main (Current)

remoteEntry.js size: 70K
gzip size: 21732 bytes
brotli size: 19229 bytes

This Branch (no optimization flag enabled)

remoteEntry.js size: 69K
gzip size: 21437 bytes
brotli size: 19024 bytes

disableSnapshot: true

remoteEntry.js size: 65K
gzip size: 20096 bytes
brotli size: 17860 bytes

target: 'web'

remoteEntry.js size: 60K
gzip size: 19314 bytes
brotli size: 17105 bytes

Both enabled

remoteEntry.js size: 56K
gzip size: 17998 bytes
brotli size: 15982 bytes

Both enabled + external runtime enabled

remoteEntry.js size: 14K
gzip size: 5381 bytes
brotli size: 4703 bytes

Both disabled + external runtime enabled

remoteEntry.js size: 22K
gzip size: 8222 bytes
brotli size: 7269 bytes

…/tree-shake-flags

…builds

…ion parity Adds FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN and ENV_TARGET support. Enables new optimization and environment targeting options. Ensures parity with webpack plugin. Enables runtime feature toggling. Enables tree-shaking in runtime and SDK.

Copilot

Copilot reviewed 10 out of 13 changed files in this pull request and generated no comments.

Files not reviewed (3)

apps/website-new/docs/en/configure/experiments.mdx: Language not supported
package.json: Language not supported
packages/chrome-devtools/project.json: Language not supported

# Conflicts: # package.json

…N when explicitly set

zhoushaw · 2025-05-15T02:52:45Z

apps/website-new/docs/en/configure/experiments.mdx

-    provideExternalRuntime: false
+    provideExternalRuntime: false,
+    optimization: {
+      disableSnapshot: false,


It looks better to change it to "disable manifest"

It also includes the inability to use the ts type

yes but there are many users who come from webpack v1 - they want direct switch to v2 and dont use any new capability - first introduction to v2 is a v70kb increase in entry file - and many companies took advantage of small remote entry size of v1 where its like 10kb, they will load 80+ remote modules, but now they are 7X larger and remoteEntry becomes 5.7mb of eager chunk loading required to initialize the system. So these users would prefer to turn off features they do not yet adopt, then explore wha they need and slowly increase the payload size while communicating the values of the additional runtime code. Or if user is in production - they may want no json http call and prefer js entry with minimal payload overhead, so they can use lite federaiton in prod and full in lower environment if they needed to balance the overhead at the expense of capabilities.

any user not using json protocol has no ts sync already. So if user only uses js remote they already are on ~v1.5 level capabilities. So they have no requirement for the code and already do not leverage all of v2 features. Some user wants v1 + runtime plugin. to keep payload cost of adoption small but valuable to busniess case.

2heal1 · 2025-05-15T02:56:07Z

apps/website-new/docs/en/configure/experiments.mdx

+    provideExternalRuntime: false,
+    optimization: {
+      disableSnapshot: false,
+      target: 'web',


Is this designed for other bundler like vite ? Becasue we can infer it from automatically.

In the future, will it automatically be apply in webpack/rspack ?

This is not designed for other bundler - but i was worried about automatic inference because case like web worker or custom react native target, the infer target may not always be accurate - and you end up removing part of the system from a environment acting like another. Like in react native or lynx - it use commonjs chunk loader - but may be target of web worker or worker, so this may compile to web target but use other mechanics and assuming that may have breaking implications. Yes we can detect, but custom environment or mixed output could exist that i dont foresee right now

Yes the feature will work in webpack and rspack, but currently user must opt into it explicitly - so if there is problem, they understand why because they enabled it. We could add a 'auto' option where we add attempt to infer, so user still must use flag to enable and we can add other enums to it if needed like react-native for custom env target code that we may need to support within the runtime core - without making the core larger - and if user want to tree shake the vanillia runtime themselves - they can just set these in define plugins of their own bundler and customize the library for their own needs as well.

gotcha cool

2heal1 · 2025-05-15T03:00:58Z

.changeset/ai-calm-dog.md

+
+Updated ModuleFederationPlugin to enhance configuration capabilities and target environment identification.
+
+- Introduced `definePluginOptions` to manage DefinePlugin settings.


This format changeset can not be consumed . need to fix https://github.com/module-federation/core/actions/runs/15035515868/job/42256409157

fixed there was ``` in another file that broke it

changeset-bot · 2025-05-15T03:14:14Z

🦋 Changeset detected

Latest commit: e45311b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 32 packages

Name	Type
@module-federation/enhanced	Patch
@module-federation/sdk	Patch
@module-federation/runtime-core	Patch
@module-federation/rspack	Patch
@module-federation/modern-js	Patch
@module-federation/nextjs-mf	Patch
@module-federation/node	Patch
@module-federation/rsbuild-plugin	Patch
@module-federation/storybook-addon	Patch
@module-federation/modernjsapp	Patch
@module-federation/devtools	Patch
@module-federation/cli	Patch
@module-federation/data-prefetch	Patch
@module-federation/dts-plugin	Patch
@module-federation/esbuild	Patch
@module-federation/managers	Patch
@module-federation/manifest	Patch
@module-federation/retry-plugin	Patch
@module-federation/runtime	Patch
@module-federation/utilities	Patch
@module-federation/webpack-bundler-runtime	Patch
@module-federation/bridge-react-webpack-plugin	Patch
@module-federation/bridge-react	Patch
@module-federation/bridge-vue3	Patch
remote5	Patch
@module-federation/runtime-tools	Patch
@module-federation/inject-external-runtime-core-plugin	Patch
@module-federation/third-party-dts-extractor	Patch
@module-federation/bridge-shared	Patch
@module-federation/error-codes	Patch
create-module-federation	Patch
website-new	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

… bundle size (#3704)

… bundle size (module-federation#3704)

ScriptedAlchemy added 3 commits April 15, 2025 23:19

feat(enhanced): manual Tree shake markers

3bcd4b2

chore: add docs about optimization

f9b5ed9

chore: changesets

430cf40

github-actions bot added the change: perf label Apr 16, 2025

ScriptedAlchemy and others added 2 commits April 16, 2025 02:26

fix(enhanced): refine target environment detection logic

87d2bf3

Merge branch 'main' into perf/tree-shake-flags

65dff8e

ScriptedAlchemy marked this pull request as ready for review April 16, 2025 17:55

ScriptedAlchemy added 6 commits April 16, 2025 11:05

Merge branch 'main' into perf/tree-shake-flags

0d21411

Merge remote-tracking branch 'origin/perf/tree-shake-flags' into perf…

9c8d93e

…/tree-shake-flags

chore(chrome-devtools): add dependsOn to build target for dependency …

4ba61af

…builds

chore: remove debug logs

79094cd

chore: depednon devtools

eb01df9

ScriptedAlchemy requested review from zhoushaw, Copilot and 2heal1 April 17, 2025 01:16

Merge branch 'main' into perf/tree-shake-flags

1ff85e9

Copilot AI reviewed Apr 17, 2025

View reviewed changes

ScriptedAlchemy added 3 commits May 13, 2025 05:14

Merge branch 'main' into perf/tree-shake-flags

5bbcca6

# Conflicts: # package.json

refactor(enhanced): streamline ENV_TARGET determination logic

be54b58

fix: only define ENV_TARGET and FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGI…

0dd1d3a

…N when explicitly set

zhoushaw reviewed May 15, 2025

View reviewed changes

2heal1 reviewed May 15, 2025

View reviewed changes

ScriptedAlchemy added 3 commits May 14, 2025 20:13

Update ai-sleepy-cat.md

ea05c2c

Update ai-sleepy-lion.md

64ea9c1

Update ai-sleepy-lion.md

08ae524

2heal1 approved these changes May 15, 2025

View reviewed changes

ScriptedAlchemy and others added 2 commits May 15, 2025 14:23

Merge branch 'main' into perf/tree-shake-flags

da7809b

Merge branch 'main' into perf/tree-shake-flags

e45311b

ScriptedAlchemy merged commit 82b8cac into main May 15, 2025
17 checks passed

ScriptedAlchemy deleted the perf/tree-shake-flags branch May 15, 2025 23:06

ScriptedAlchemy added a commit that referenced this pull request May 15, 2025

perf: add tree shake markers to enable/disable capabilities to reduce…

30e737e

… bundle size (#3704)

mitchellrj pushed a commit to mitchellrj/module-federation-core that referenced this pull request May 27, 2025

perf: add tree shake markers to enable/disable capabilities to reduce…

7f5239e

… bundle size (module-federation#3704)

mitchellrj pushed a commit to mitchellrj/module-federation-core that referenced this pull request May 27, 2025

perf: add tree shake markers to enable/disable capabilities to reduce…

8a80567

… bundle size (module-federation#3704)


		Updated ModuleFederationPlugin to enhance configuration capabilities and target environment identification.

		- Introduced `definePluginOptions` to manage DefinePlugin settings.

Uh oh!

perf: add tree shake markers to enable/disable capabilities to reduce bundle size #3704

perf: add tree shake markers to enable/disable capabilities to reduce bundle size #3704

Uh oh!

Conversation

ScriptedAlchemy commented Apr 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Enhancements and Optimizations:

Related Issue

Types of changes

Checklist

Uh oh!

netlify bot commented Apr 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for module-federation-docs ready!

Uh oh!

ScriptedAlchemy commented Apr 16, 2025

Main (Current)

This Branch (no optimization flag enabled)

disableSnapshot: true

target: 'web'

Both enabled

Both enabled + external runtime enabled

Both disabled + external runtime enabled

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

changeset-bot bot commented May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

ScriptedAlchemy commented Apr 16, 2025 •

edited

Loading

netlify bot commented Apr 16, 2025 •

edited

Loading

changeset-bot bot commented May 15, 2025 •

edited

Loading