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

Author: ScriptedAlchemy

.changeset/ai-calm-dog.md

@@ -0,0 +1,10 @@
+---
+"@module-federation/enhanced": patch
+---
+
+Updated ModuleFederationPlugin to enhance configuration capabilities and target environment identification.
+
+- Introduced `definePluginOptions` to manage DefinePlugin settings.
+- Added `FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN` to handle disabling of snapshot optimizations via experiments.
+- Implemented environment target detection (`web` or `node`) based on compiler options and experiments.
+- Consolidated DefinePlugin application with the newly constructed `definePluginOptions`.

.changeset/ai-sleepy-cat.md

@@ -0,0 +1,12 @@
+---
+"@module-federation/sdk": patch
+---
+
+Introduced environment-specific handling for `createScriptNode` and `loadScriptNode` functions and added build optimization options.
+
+- Declared `ENV_TARGET` constant to differentiate between 'web' and 'node' environments.
+- Modified `createScriptNode` and `loadScriptNode` to execute only in Node.js environment.
+  - Throws an error if attempted in a non-Node.js environment.
+- Added logging for debugging purposes.
+- Introduced `optimization` options in `ModuleFederationPluginOptions`.
+  - Added config for `disableSnapshot` and `target` environment optimizations.

.changeset/ai-sleepy-lion.md

@@ -0,0 +1,12 @@
+---
+"@module-federation/runtime-core": patch
+---
+
+Add conditional functionality for snapshots and optimize entry loading.
+
+- Introduced FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN constant to control snapshot functionality.
+  - Default to include snapshot functionality if constant is not defined.
+- Simplified plugin loading logic to check USE_SNAPSHOT flag.
+- Added ENV_TARGET constant to differentiate between web and node environments.
+- Extracted duplicated logic for handling remote entry loaded into `handleRemoteEntryLoaded` function.
+- Refactored entry loading to use conditional environment checks with `ENV_TARGET`.

.changeset/rspack-define-env-constants.md

@@ -0,0 +1,9 @@
+---
+"@module-federation/rspack": patch
+---
+
+Update Rspack ModuleFederationPlugin to support enhanced configuration capabilities and environment targeting.
+
+- Injects `FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN` and `ENV_TARGET` as global constants using DefinePlugin, based on the new `experiments.optimization` options.
+- Ensures parity with the Webpack plugin for build-time optimizations and environment-specific code paths.
+- Enables tree-shaking and feature toggling in the runtime and SDK for both Rspack and Webpack builds. 

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

@@ -10,7 +10,11 @@ new ModuleFederationPlugin({
   experiments: {
     asyncStartup: true,
     externalRuntime: false,
-    provideExternalRuntime: false
+    provideExternalRuntime: false,
+    optimization: {
+      disableSnapshot: false,
+      target: 'web',
+    },
   },
   shared: {
     react: {
@@ -59,3 +63,40 @@ Make sure to only configure it on the topmost consumer! If multiple consumers in
 :::
 
 Setting `true` will inject the MF runtime at the consumer.
+
+## optimization
+
+This object contains flags related to build-time optimizations that can affect the Module Federation runtime's size and behavior.
+
+### disableSnapshot
+
+- Type: `boolean`
+- Required: No
+- Default: `false`
+
+When set to `true`, this option defines the `FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN` global constant as `true` during the build. In the `@module-federation/runtime-core`, this prevents the `snapshotPlugin()` and `generatePreloadAssetsPlugin()` from being included and initialized within the FederationHost.
+
+**Impact:**
+*   **Benefit:** Can reduce the overall bundle size of the Module Federation runtime by excluding the code for these two plugins.
+*   **Cost:** Disables the functionality provided by these plugins. The `snapshotPlugin` is crucial for the "mf-manifest protocol" – it's responsible for generating or providing runtime access to a build manifest (e.g., `mf-manifest.json`) containing metadata about exposed modules, shared dependencies, versions, and remotes. Disabling it means:
+    *   The runtime loses access to this build manifest data.
+    *   Features relying on the manifest, such as dynamic remote discovery, manifest-based version compatibility checks, advanced asset preloading (also handled by the removed `generatePreloadAssetsPlugin`), and potentially runtime debugging/introspection tools, will not function correctly or will be unavailable.
+    *   Use this option only if you do not rely on these manifest-driven features and prioritize a minimal runtime footprint.
+
+### target
+
+- Type: `'web' | 'node'`
+- Required: No
+- Default: Inferred from Webpack's `target` option (usually `'web'`)
+
+This option defines the `ENV_TARGET` global constant during the build, specifying the intended execution environment.
+
+**Impact:**
+*   **`target: 'web'`**: Optimizes the build for browser environments.
+    *   Ensures browser-specific remote entry loading mechanisms are used (`loadEntryDom`).
+    *   Crucially, enables tree-shaking/dead-code elimination for Node.js-specific code within the `@module-federation/sdk`. Functions like `createScriptNode` and `loadScriptNode`, along with their required Node.js built-in modules (e.g., `vm`, `path`, `http`), are completely removed from the bundle, significantly reducing its size.
+*   **`target: 'node'`**: Optimizes the build for Node.js environments.
+    *   Ensures Node.js-specific remote entry loading mechanisms are used (`loadEntryNode`).
+    *   Includes the necessary Node.js-specific functions from the SDK (`createScriptNode`, `loadScriptNode`) in the bundle, allowing the federated application to function correctly in Node.js.
+
+Explicitly setting this value is recommended to ensure the intended optimizations are applied, especially in universal or server-side rendering scenarios.

package.json

@@ -51,7 +51,7 @@
     "prepare": "husky install",
     "changeset": "changeset",
     "build:packages": "npx nx affected -t build --parallel=10 --exclude='*,!tag:type:pkg'",
-    "changegen": "./changeset-gen.js --path ./packages/enhanced --staged &&./changeset-gen.js --path ./packages/cli --staged && ./changeset-gen.js --path ./packages/node --staged && ./changeset-gen.js --path ./packages/runtime --staged && ./changeset-gen.js --path ./packages/data-prefetch --staged && ./changeset-gen.js --path ./packages/nextjs-mf --staged && ./changeset-gen.js --path ./packages/dts-plugin --staged",
+    "changegen": "./changeset-gen.js --path ./packages/runtime && ./changeset-gen.js --path ./packages/runtime-core && ./changeset-gen.js --path ./packages/sdk &&./changeset-gen.js --path ./packages/cli --staged && ./changeset-gen.js --path ./packages/enhanced && ./changeset-gen.js --path ./packages/node && ./changeset-gen.js --path ./packages/data-prefetch && ./changeset-gen.js --path ./packages/nextjs-mf && ./changeset-gen.js --path ./packages/dts-plugin",
     "commitgen:staged": "./commit-gen.js --path ./packages --staged",
     "commitgen:main": "./commit-gen.js --path ./packages",
     "changeset:status": "changeset status",

packages/chrome-devtools/project.json

@@ -21,7 +21,13 @@
       "executor": "nx:run-commands",
       "options": {
         "commands": ["npm run build --prefix packages/chrome-devtools"]
-      }
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ]
     },
     "test": {
       "executor": "nx:run-commands",

packages/enhanced/src/lib/container/ModuleFederationPlugin.ts

@@ -57,18 +57,43 @@ class ModuleFederationPlugin implements WebpackPluginInstance {
   }
 
   private _patchBundlerConfig(compiler: Compiler): void {
-    const { name } = this._options;
+    const { name, experiments } = this._options;
+    const definePluginOptions: Record<string, string | boolean> = {};
+
     const MFPluginNum = compiler.options.plugins.filter(
       (p): p is WebpackPluginInstance =>
         !!p && (p as any).name === 'ModuleFederationPlugin',
     ).length;
+
     if (name && MFPluginNum < 2) {
-      new compiler.webpack.DefinePlugin({
-        FEDERATION_BUILD_IDENTIFIER: JSON.stringify(
-          composeKeyWithSeparator(name, utils.getBuildVersion()),
-        ),
-      }).apply(compiler);
+      definePluginOptions['FEDERATION_BUILD_IDENTIFIER'] = JSON.stringify(
+        composeKeyWithSeparator(name, utils.getBuildVersion()),
+      );
+    }
+
+    const disableSnapshot = experiments?.optimization?.disableSnapshot ?? false;
+    definePluginOptions['FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN'] =
+      disableSnapshot;
+
+    // Determine ENV_TARGET: only if manually specified in experiments.optimization.target
+    if (
+      experiments?.optimization &&
+      typeof experiments.optimization === 'object' &&
+      experiments.optimization !== null &&
+      'target' in experiments.optimization
+    ) {
+      const manualTarget = experiments.optimization.target as
+        | 'web'
+        | 'node'
+        | undefined;
+      // Ensure the target is one of the expected values before setting
+      if (manualTarget === 'web' || manualTarget === 'node') {
+        definePluginOptions['ENV_TARGET'] = JSON.stringify(manualTarget);
+      }
     }
+    // No inference for ENV_TARGET. If not manually set and valid, it's not defined.
+
+    new compiler.webpack.DefinePlugin(definePluginOptions).apply(compiler);
   }
 
   /**

packages/rspack/src/ModuleFederationPlugin.ts

@@ -39,14 +39,37 @@ export class ModuleFederationPlugin implements RspackPluginInstance {
   }
 
   private _patchBundlerConfig(compiler: Compiler): void {
-    const { name } = this._options;
+    const { name, experiments } = this._options;
+    const definePluginOptions: Record<string, string | boolean> = {};
     if (name) {
-      new compiler.webpack.DefinePlugin({
-        FEDERATION_BUILD_IDENTIFIER: JSON.stringify(
-          composeKeyWithSeparator(name, utils.getBuildVersion()),
-        ),
-      }).apply(compiler);
+      definePluginOptions['FEDERATION_BUILD_IDENTIFIER'] = JSON.stringify(
+        composeKeyWithSeparator(name, utils.getBuildVersion()),
+      );
     }
+    // Add FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN
+    const disableSnapshot = experiments?.optimization?.disableSnapshot ?? false;
+    definePluginOptions['FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN'] =
+      disableSnapshot;
+
+    // Determine ENV_TARGET: only if manually specified in experiments.optimization.target
+    if (
+      experiments?.optimization &&
+      typeof experiments.optimization === 'object' &&
+      experiments.optimization !== null &&
+      'target' in experiments.optimization
+    ) {
+      const manualTarget = experiments.optimization.target as
+        | 'web'
+        | 'node'
+        | undefined;
+      // Ensure the target is one of the expected values before setting
+      if (manualTarget === 'web' || manualTarget === 'node') {
+        definePluginOptions['ENV_TARGET'] = JSON.stringify(manualTarget);
+      }
+    }
+    // No inference for ENV_TARGET. If not manually set and valid, it's not defined.
+
+    new compiler.webpack.DefinePlugin(definePluginOptions).apply(compiler);
   }
 
   private _checkSingleton(compiler: Compiler): void {

packages/runtime-core/src/core.ts

@@ -35,6 +35,15 @@ import { SharedHandler } from './shared';
 import { RemoteHandler } from './remote';
 import { formatShareConfigs } from './utils/share';
 
+// Declare the global constant that will be defined by DefinePlugin
+// Default to true if not defined (e.g., when runtime-core is used outside of webpack)
+// so that snapshot functionality is included by default.
+declare const FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN: boolean;
+const USE_SNAPSHOT =
+  typeof FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN === 'boolean'
+    ? !FEDERATION_OPTIMIZE_NO_SNAPSHOT_PLUGIN
+    : true; // Default to true (use snapshot) when not explicitly defined
+
 export class FederationHost {
   options: Options;
   hooks = new PluginSystem({
@@ -160,12 +169,15 @@ export class FederationHost {
   });
 
   constructor(userOptions: UserOptions) {
+    const plugins = USE_SNAPSHOT
+      ? [snapshotPlugin(), generatePreloadAssetsPlugin()]
+      : [];
     // TODO: Validate the details of the options
     // Initialize options with default values
     const defaultOptions: Options = {
       id: getBuilderId(),
       name: userOptions.name,
-      plugins: [snapshotPlugin(), generatePreloadAssetsPlugin()],
+      plugins,
       remotes: [],
       shared: {},
       inBrowser: isBrowserEnv(),
@@ -328,7 +340,6 @@ export class FederationHost {
       return res;
     }, pluginRes || []);
   }
-
   registerRemotes(remotes: Remote[], options?: { force?: boolean }): void {
     return this.remoteHandler.registerRemotes(remotes, options);
   }