WIP: perf: reduce chunk map if remote entry chunk

apps/3000-home/cypress/e2e/app.cy.ts

@@ -22,10 +22,12 @@ describe('3000-home/', () => {
     it('should display welcome message', () => {
       getH1().contains('This is SPA combined');
     });
-    it('Api endpoint works', () => {
-      const urls = ['/api/test'];
-      urls.forEach((url) => {
-        cy.request(url); // This makes a GET request, not a full page visit
+  });
+
+  describe('API endpoint should return json', () => {
+    it('Query Endpoint', () => {
+      cy.request('/api/test').then((response) => {
+        expect(response.headers['content-type']).to.include('application/json');
       });
     });
   });

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

@@ -19,6 +19,7 @@ const ConcatenatedModule = require(
 ) as typeof import('webpack/lib/optimize/ConcatenatedModule');
 
 const PLUGIN_NAME = 'HoistContainerReferences';
+
 /**
  * This class is used to hoist container references in the code.
  * @constructor
@@ -68,7 +69,11 @@ export class HoistContainerReferences implements WebpackPluginInstance {
 
         // Hook into the optimizeDependencies phase
         compilation.hooks.optimizeDependencies.tap(
-          PLUGIN_NAME,
+          {
+            name: PLUGIN_NAME,
+            // basic optimization stage - it runs first
+            stage: -10,
+          },
           (modules: Iterable<Module>) => {
             if (this.entryFilePath) {
               let runtime: RuntimeSpec | undefined;
@@ -87,15 +92,24 @@ export class HoistContainerReferences implements WebpackPluginInstance {
                   module instanceof NormalModule &&
                   module.resource === this.bundlerRuntimeDep
                 ) {
-                  const exportsInfo: ExportsInfo =
-                    moduleGraph.getExportsInfo(module);
-                  //Since i dont use the import federation var, tree shake will eliminate it.
-                  exportsInfo.setUsedInUnknownWay(runtime);
-                  moduleGraph.addExtraReason(module, this.explanation);
-                  if (module.factoryMeta === undefined) {
-                    module.factoryMeta = {};
+                  const allRefs = this.getAllReferencedModules(
+                    compilation,
+                    module,
+                    'initial',
+                  );
+                  for (const module of allRefs) {
+                    const exportsInfo: ExportsInfo =
+                      moduleGraph.getExportsInfo(module);
+                    // Since i dont use the import federation var, tree shake will eliminate it.
+                    // also because currently the runtime is copied into all runtime chunks
+                    // some might not have the runtime import in the tree to begin with
+                    exportsInfo.setUsedInUnknownWay(runtime);
+                    moduleGraph.addExtraReason(module, this.explanation);
+                    if (module.factoryMeta === undefined) {
+                      module.factoryMeta = {};
+                    }
+                    module.factoryMeta.sideEffectFree = false;
                   }
-                  module.factoryMeta.sideEffectFree = false;
                 }
               }
             }

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

@@ -10,6 +10,7 @@ import type ExternalModule from 'webpack/lib/ExternalModule';
 import type FallbackModule from './FallbackModule';
 import type { RemotesOptions } from '@module-federation/webpack-bundler-runtime';
 import { FEDERATION_SUPPORTED_TYPES } from '@module-federation/webpack-bundler-runtime/constant';
+import ContainerEntryModule from './ContainerEntryModule';
 
 const extractUrlAndGlobal = require(
   normalizeWebpackPath('webpack/lib/util/extractUrlAndGlobal'),
@@ -44,12 +45,22 @@ class RemoteRuntimeModule extends RuntimeModule {
     //     chunkReferences = this.chunk.getAllAsyncChunks();
     //   }
     // }
+    let chunkReferences;
+    if (this.chunkGraph && this.chunk) {
+      const entryMods = Array.from(
+        this.chunkGraph.getChunkEntryModulesIterable(this.chunk),
+      );
+      const isRemoteEntry = entryMods.some(
+        (m) => m instanceof ContainerEntryModule,
+      );
+      chunkReferences = isRemoteEntry
+        ? this.chunk.getAllAsyncChunks()
+        : this.chunk.getAllReferencedChunks();
+    } else {
+      chunkReferences = this.chunk?.getAllReferencedChunks() || [];
+    }
 
-    const allChunks = [
-      ...Array.from(this.chunk?.getAllReferencedChunks() || []),
-    ];
-
-    for (const chunk of allChunks) {
+    for (const chunk of chunkReferences) {
       const modules = chunkGraph?.getChunkModulesIterableBySourceType(
         chunk,
         'remote',

packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts

@@ -39,7 +39,7 @@ const BundlerRuntimePath = require.resolve(
 );
 
 const VendoredBundlerRuntimePath = require.resolve(
-  '@module-federation/webpack-bundler-runtime/vendor',
+  '@module-federation/webpack-bundler-runtime',
   {
     paths: [RuntimeToolsPath],
   },
@@ -119,7 +119,7 @@ class FederationRuntimePlugin {
     return Template.asString([
       `import federation from '${normalizedBundlerRuntimePath}';`,
       runtimePluginTemplates,
-      embedRuntime ? '' : embedRuntimeLines,
+      embedRuntimeLines,
       `if(!${federationGlobal}.instance){`,
       Template.indent([
         runtimePluginNames.length
@@ -325,6 +325,7 @@ class FederationRuntimePlugin {
     };
 
     if (this.options?.embedRuntime) {
+      runtimePath = runtimePath.replace('.cjs', '.esm');
       // should use normal module replacement instead?
       if (!compiler.options.resolve.alias['@module-federation/runtime$']) {
         compiler.options.resolve.alias['@module-federation/runtime$'] =
@@ -389,7 +390,7 @@ class FederationRuntimePlugin {
 
     if (this.options?.implementation) {
       const runtimePath = this.options.embedRuntime
-        ? '@module-federation/webpack-bundler-runtime/vendor'
+        ? '@module-federation/webpack-bundler-runtime'
         : '@module-federation/webpack-bundler-runtime';
       this.bundlerRuntimePath = require.resolve(runtimePath, {
         paths: [this.options.implementation],
@@ -409,6 +410,19 @@ class FederationRuntimePlugin {
         this.getFilePath(),
         this.bundlerRuntimePath,
       ).apply(compiler);
+
+      new compiler.webpack.NormalModuleReplacementPlugin(
+        /@module-federation\/runtime/,
+        (resolveData) => {
+          if (/webpack-bundler-runtime/.test(resolveData.contextInfo.issuer)) {
+            resolveData.request = RuntimePath.replace('cjs', 'esm');
+
+            if (resolveData.createData) {
+              resolveData.createData.request = resolveData.request;
+            }
+          }
+        },
+      ).apply(compiler);
     }
     this.prependEntry(compiler);
     this.injectRuntime(compiler);

packages/enhanced/src/lib/sharing/ConsumeSharedRuntimeModule.ts

@@ -7,6 +7,7 @@ import { normalizeWebpackPath } from '@module-federation/sdk/normalize-webpack-p
 import type { Module, ChunkGraph, Compilation, Chunk } from 'webpack';
 import ConsumeSharedModule from './ConsumeSharedModule';
 import { getFederationGlobalScope } from '../container/runtime/utils';
+import ContainerEntryModule from '../container/ContainerEntryModule';
 
 const { Template, RuntimeGlobals, RuntimeModule } = require(
   normalizeWebpackPath('webpack'),
@@ -92,15 +93,21 @@ class ConsumeSharedRuntimeModule extends RuntimeModule {
         moduleIdToSourceMapping.set(id, sharedInfoAndHandlerStr);
       }
     };
-    // const chunkReferences = this._runtimeRequirements.has(
-    //   'federation-entry-startup',
-    // )
-    //   ? this.chunk?.getAllReferencedChunks()
-    //   : this.chunk?.getAllAsyncChunks();
-    //
-    // const allChunks = chunkReferences || [];
-    const allChunks = [...(this.chunk?.getAllReferencedChunks() || [])];
-    for (const chunk of allChunks) {
+    let chunkReferences;
+    if (this.chunkGraph && this.chunk) {
+      const entryMods = Array.from(
+        this.chunkGraph.getChunkEntryModulesIterable(this.chunk),
+      );
+      const isRemoteEntry = entryMods.some(
+        (m) => m instanceof ContainerEntryModule,
+      );
+      chunkReferences = isRemoteEntry
+        ? this.chunk.getAllAsyncChunks()
+        : this.chunk.getAllReferencedChunks();
+    } else {
+      chunkReferences = this.chunk?.getAllReferencedChunks() || [];
+    }
+    for (const chunk of chunkReferences) {
       const modules = chunkGraph.getChunkModulesIterableBySourceType(
         chunk,
         'consume-shared',
@@ -116,7 +123,7 @@ class ConsumeSharedRuntimeModule extends RuntimeModule {
         (chunkToModuleMapping[chunk.id.toString()] = []),
       );
     }
-    for (const chunk of [...(this.chunk?.getAllInitialChunks() || [])]) {
+    for (const chunk of this.chunk?.getAllInitialChunks() || []) {
       const modules = chunkGraph.getChunkModulesIterableBySourceType(
         chunk,
         'consume-shared',

webpack/types.d.ts

@@ -5,6 +5,7 @@
  */
 import Compilation from './lib/Compilation';
 import Stats from './lib/Stats';
+import NormalModuleReplacementPlugin from './lib/NormalModuleReplacementPlugin';
 import MultiCompiler from './lib/MultiCompiler';
 import Parser from './lib/Parser';
 import ModuleDependency from './lib/dependencies/ModuleDependency';
@@ -3178,24 +3179,6 @@ declare interface NormalModuleLoaderContext<OptionsType> {
   _compiler?: Compiler;
 }
 
-declare class NormalModuleReplacementPlugin {
-  /**
-   * Create an instance of the plugin
-   */
-  constructor(
-    resourceRegExp: RegExp,
-    newResource: string | ((arg0: ResolveData) => void),
-  );
-
-  resourceRegExp: RegExp;
-  newResource: string | ((arg0: ResolveData) => void);
-
-  /**
-   * Apply the plugin
-   */
-  apply(compiler: Compiler): void;
-}
-
 declare class NullDependency extends Dependency {
   constructor();