@atlaspack/bundler-default 3.1.3-typescript-bc4459c37.0 → 3.2.1-typescript-5ad950d33.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaspack/bundler-default
 
+## 3.2.0
+
+### Minor Changes
+
+- [#721](https://github.com/atlassian-labs/atlaspack/pull/721) [`069de47`](https://github.com/atlassian-labs/atlaspack/commit/069de478e64fb5889f6f2ce023eb510782767fbd) Thanks [@benjervis](https://github.com/benjervis)! - Add support for bundle merging based on `webpackChunkName` comments.
+
+  Adding a `webpackChunkName` comment to an import will allow the bundler to merge multiple imports into a single bundle.
+
+  e.g.:
+
+  ```ts
+  import(/* webpackChunkName: "my-chunk" */ './my-module');
+  import(/* webpackChunkName: "my-chunk" */ './another-module');
+  ```
+
+  This can be enabled with the feature flag `supportWebpackChunkName`.
+
+### Patch Changes
+
+- Updated dependencies [[`069de47`](https://github.com/atlassian-labs/atlaspack/commit/069de478e64fb5889f6f2ce023eb510782767fbd)]:
+  - @atlaspack/feature-flags@2.20.0
+  - @atlaspack/graph@3.5.10
+  - @atlaspack/utils@2.17.3
+  - @atlaspack/plugin@2.14.21
+
 ## 3.1.2
 
 ### Patch Changes

package/lib/decorateLegacyGraph.js

@@ -42,11 +42,13 @@ function decorateLegacyGraph(idealGraph, bundleGraph) {
     bundleGroupBundleIds,
     manualAssetToBundle
   } = idealGraph;
+  // This line can be deleted once supportWebpackChunkName feature flag is removed.
   let entryBundleToBundleGroup = new Map();
   // Step Create Bundles: Create bundle groups, bundles, and shared bundles and add assets to them
   for (let [bundleNodeId, idealBundle] of idealBundleGraph.nodes.entries()) {
     if (!idealBundle || idealBundle === 'root') continue;
     let entryAsset = idealBundle.mainEntryAsset;
+    // This line can be deleted once supportWebpackChunkName feature flag is removed.
     let bundleGroup;
     let bundle;
     if (bundleGroupBundleIds.has(bundleNodeId)) {
@@ -57,19 +59,33 @@ function decorateLegacyGraph(idealGraph, bundleGraph) {
         return dependency.value;
       });
       (0, _assert().default)(entryAsset != null, 'Processing a bundleGroup with no entry asset');
+      let bundleGroups = new Map();
       for (let dependency of dependencies) {
         bundleGroup = bundleGraph.createBundleGroup(dependency, idealBundle.target);
+        bundleGroups.set(bundleGroup.entryAssetId, bundleGroup);
+      }
+      if ((0, _featureFlags().getFeatureFlag)('supportWebpackChunkName')) {
+        (0, _assert().default)(bundleGroups.size > 0, 'No bundle groups created');
+      } else {
+        (0, _assert().default)(bundleGroup);
+        entryBundleToBundleGroup.set(bundleNodeId, bundleGroup);
       }
-      (0, _assert().default)(bundleGroup);
-      entryBundleToBundleGroup.set(bundleNodeId, bundleGroup);
       bundle = (0, _nullthrows().default)(bundleGraph.createBundle({
         entryAsset: (0, _nullthrows().default)(entryAsset),
+        bundleRoots: Array.from(idealBundle.bundleRoots),
         needsStableName: idealBundle.needsStableName,
         bundleBehavior: idealBundle.bundleBehavior,
         target: idealBundle.target,
         manualSharedBundle: idealBundle.manualSharedBundle
       }));
-      bundleGraph.addBundleToBundleGroup(bundle, bundleGroup);
+      if ((0, _featureFlags().getFeatureFlag)('supportWebpackChunkName')) {
+        for (let bundleGroup of bundleGroups.values()) {
+          bundleGraph.addBundleToBundleGroup(bundle, bundleGroup);
+        }
+      } else {
+        (0, _assert().default)(bundleGroup);
+        bundleGraph.addBundleToBundleGroup(bundle, bundleGroup);
+      }
     } else if (idealBundle.sourceBundles.size > 0 && !idealBundle.mainEntryAsset) {
       let uniqueKey = idealBundle.uniqueKey != null ? idealBundle.uniqueKey : [...idealBundle.assets].map(asset => asset.id).join(',');
       bundle = (0, _nullthrows().default)(bundleGraph.createBundle({
@@ -95,6 +111,7 @@ function decorateLegacyGraph(idealGraph, bundleGraph) {
       (0, _assert().default)(entryAsset != null);
       bundle = (0, _nullthrows().default)(bundleGraph.createBundle({
         entryAsset,
+        bundleRoots: Array.from(idealBundle.bundleRoots),
         needsStableName: idealBundle.needsStableName,
         bundleBehavior: idealBundle.bundleBehavior,
         target: idealBundle.target,

package/lib/idealGraph.d.ts

@@ -9,6 +9,7 @@ export type Bundle = {
     bundleBehavior?: BundleBehavior | null | undefined;
     needsStableName: boolean;
     mainEntryAsset: Asset | null | undefined;
+    bundleRoots: Set<Asset>;
     size: number;
     sourceBundles: Set<NodeId>;
     target: Target;

package/lib/idealGraph.js

@@ -66,6 +66,11 @@ const idealBundleGraphEdges = exports.idealBundleGraphEdges = Object.freeze({
 // which mutates the assetGraph into the bundleGraph we would
 // expect from default bundler
 
+function isNonRootBundle(bundle, message) {
+  let existingBundle = (0, _nullthrows().default)(bundle, message);
+  (0, _assert().default)(existingBundle !== 'root', "Bundle cannot be 'root'");
+  return existingBundle;
+}
 function createIdealGraph(assetGraph, config, entries, logger) {
   var _config$sharedBundleM;
   // Asset to the bundle and group it's an entry of
@@ -810,6 +815,8 @@ function createIdealGraph(assetGraph, config, entries, logger) {
     }
   }
   let manualSharedBundleIds = new Set([...manualSharedMap.values()]);
+  let modifiedSourceBundles = new Set();
+
   // Step split manual shared bundles for those that have the "split" property set
   let remainderMap = new (_utils().DefaultMap)(() => []);
   for (let id of manualSharedMap.values()) {
@@ -881,6 +888,57 @@ function createIdealGraph(assetGraph, config, entries, logger) {
       }
     }
   }
+  if ((0, _featureFlags().getFeatureFlag)('supportWebpackChunkName')) {
+    // Merge webpack chunk name bundles
+    let chunkNameBundles = new (_utils().DefaultMap)(() => new Set());
+    for (let [nodeId, node] of dependencyBundleGraph.nodes.entries()) {
+      var _bundleNode$value$mai;
+      // meta.chunkName is set by the Rust transformer, so we just need to find
+      // bundles that have a chunkName set.
+      if (!node || node.type !== 'dependency' || node.value.meta.chunkName == null) {
+        continue;
+      }
+      let connectedBundles = dependencyBundleGraph.getNodeIdsConnectedFrom(nodeId, dependencyPriorityEdges[node.value.priority]);
+      if (connectedBundles.length === 0) {
+        continue;
+      }
+      (0, _assert().default)(connectedBundles.length === 1, 'Expected webpackChunkName dependency to be connected to no more than one bundle');
+      let bundleId = connectedBundles[0];
+      let bundleNode = dependencyBundleGraph.getNode(bundleId);
+      (0, _assert().default)(bundleNode != null && bundleNode.type === 'bundle');
+
+      // If a bundle does not have a main entry asset, it's somehow just a
+      // shared bundle, and will be merged/deleted by other means.
+      if (bundleNode.value.mainEntryAsset == null) {
+        continue;
+      }
+      let bundleNodeId = null;
+      let mainEntryAssetId = (_bundleNode$value$mai = bundleNode.value.mainEntryAsset) === null || _bundleNode$value$mai === void 0 ? void 0 : _bundleNode$value$mai.id;
+      if (mainEntryAssetId != null) {
+        bundleNodeId = bundles.get(mainEntryAssetId);
+      }
+      if (bundleNodeId == null) {
+        continue;
+      }
+      chunkNameBundles.get(node.value.meta.chunkName)
+      // DependencyBundleGraph uses content keys as node ids, so we can use that
+      // to get the bundle id.
+      .add(bundleNodeId);
+    }
+    for (let [chunkName, bundleIds] of chunkNameBundles.entries()) {
+      // The `[request]` placeholder is not yet supported
+      if (bundleIds.size <= 1 || typeof chunkName === 'string' && chunkName.includes('[request]')) {
+        continue; // Nothing to merge
+      }
+
+      // Merge all bundles with the same chunk name into the first one.
+      let [firstBundleId, ...rest] = Array.from(bundleIds);
+      for (let bundleId of rest) {
+        // @ts-expect-error TS2345
+        mergeBundles(firstBundleId, bundleId);
+      }
+    }
+  }
 
   // Step merge shared bundles that meet the overlap threshold
   // This step is skipped by default as the threshold defaults to 1
@@ -899,7 +957,7 @@ function createIdealGraph(assetGraph, config, entries, logger) {
   }
 
   // Step Remove Shared Bundles: Remove shared bundles from bundle groups that hit the parallel request limit.
-  let modifiedSourceBundles = new Set();
+
   if (config.disableSharedBundles === false) {
     for (let bundleGroupId of bundleGraph.getNodeIdsConnectedFrom(rootNodeId)) {
       // Find shared bundles in this bundle group.
@@ -987,10 +1045,10 @@ function createIdealGraph(assetGraph, config, entries, logger) {
       }
     }
   }
-  function mergeBundles(bundleGraph, bundleToKeepId, bundleToRemoveId, assetReference) {
-    let bundleToKeep = (0, _nullthrows().default)(bundleGraph.getNode(bundleToKeepId));
-    let bundleToRemove = (0, _nullthrows().default)(bundleGraph.getNode(bundleToRemoveId));
-    (0, _assert().default)(bundleToKeep !== 'root' && bundleToRemove !== 'root');
+  function mergeBundles(bundleToKeepId, bundleToRemoveId) {
+    let bundleToKeep = isNonRootBundle(bundleGraph.getNode(bundleToKeepId), `Bundle ${bundleToKeepId} not found`);
+    let bundleToRemove = isNonRootBundle(bundleGraph.getNode(bundleToRemoveId), `Bundle ${bundleToRemoveId} not found`);
+    modifiedSourceBundles.add(bundleToKeep);
     for (let asset of bundleToRemove.assets) {
       bundleToKeep.assets.add(asset);
       bundleToKeep.size += asset.stats.size;
@@ -1001,8 +1059,20 @@ function createIdealGraph(assetGraph, config, entries, logger) {
     }
 
     // Merge any internalized assets
-    (0, _assert().default)(bundleToKeep.internalizedAssets && bundleToRemove.internalizedAssets, 'All shared bundles should have internalized assets');
-    bundleToKeep.internalizedAssets.union(bundleToRemove.internalizedAssets);
+    if ((0, _featureFlags().getFeatureFlag)('supportWebpackChunkName')) {
+      if (bundleToKeep.internalizedAssets != null) {
+        if (bundleToRemove.internalizedAssets != null) {
+          bundleToKeep.internalizedAssets.intersect(bundleToRemove.internalizedAssets);
+        } else {
+          bundleToKeep.internalizedAssets.clear();
+        }
+      }
+    } else {
+      (0, _assert().default)(bundleToKeep.internalizedAssets && bundleToRemove.internalizedAssets, 'All shared bundles should have internalized assets');
+      bundleToKeep.internalizedAssets.union(bundleToRemove.internalizedAssets);
+    }
+
+    // Merge and clean up source bundles
     for (let sourceBundleId of bundleToRemove.sourceBundles) {
       if (bundleToKeep.sourceBundles.has(sourceBundleId)) {
         continue;
@@ -1010,6 +1080,66 @@ function createIdealGraph(assetGraph, config, entries, logger) {
       bundleToKeep.sourceBundles.add(sourceBundleId);
       bundleGraph.addEdge(sourceBundleId, bundleToKeepId);
     }
+    if ((0, _featureFlags().getFeatureFlag)('supportWebpackChunkName')) {
+      bundleToKeep.sourceBundles.delete(bundleToRemoveId);
+      for (let bundle of bundleGraph.getNodeIdsConnectedFrom(bundleToRemoveId)) {
+        let bundleNode = (0, _nullthrows().default)(bundleGraph.getNode(bundle));
+        if (bundleNode === 'root') {
+          continue;
+        }
+
+        // If the bundle is a source bundle, add it to the bundle to keep
+        if (bundleNode.sourceBundles.has(bundleToRemoveId)) {
+          bundleNode.sourceBundles.add(bundleToKeepId);
+          bundleNode.sourceBundles.delete(bundleToRemoveId);
+          bundleGraph.addEdge(bundleToKeepId, bundle);
+        }
+      }
+
+      // Merge bundle roots
+      for (let bundleRoot of bundleToRemove.bundleRoots) {
+        bundleToKeep.bundleRoots.add(bundleRoot);
+      }
+      if (bundleToRemove.mainEntryAsset != null) {
+        (0, _assert().default)(bundleToKeep.mainEntryAsset != null);
+
+        // Merge the bundles in bundle group
+        let bundlesInRemoveBundleGroup = getBundlesForBundleGroup(bundleToRemoveId);
+        for (let bundleIdInGroup of bundlesInRemoveBundleGroup) {
+          if (bundleIdInGroup === bundleToRemoveId) {
+            continue;
+          }
+          bundleGraph.addEdge(bundleToKeepId, bundleIdInGroup);
+        }
+
+        // Remove old bundle group
+        bundleGroupBundleIds.delete(bundleToRemoveId);
+
+        // Clean up bundle roots
+        let bundleRootToRemoveNodeId = (0, _nullthrows().default)(assetToBundleRootNodeId.get((0, _nullthrows().default)(bundleToRemove.mainEntryAsset)));
+        let bundleRootToKeepNodeId = (0, _nullthrows().default)(assetToBundleRootNodeId.get((0, _nullthrows().default)(bundleToKeep.mainEntryAsset)));
+        for (let nodeId of bundleRootGraph.getNodeIdsConnectedTo(bundleRootToRemoveNodeId)) {
+          bundleRootGraph.addEdge(nodeId, bundleRootToKeepNodeId);
+          bundleRootGraph.removeEdge(nodeId, bundleRootToRemoveNodeId);
+        }
+        for (let nodeId of bundleRootGraph.getNodeIdsConnectedFrom(bundleRootToRemoveNodeId)) {
+          bundleRootGraph.addEdge(bundleRootToKeepNodeId, nodeId);
+          bundleRootGraph.removeEdge(bundleRootToRemoveNodeId, nodeId);
+        }
+        bundleRoots.set((0, _nullthrows().default)(bundleToRemove.mainEntryAsset), [bundleToKeepId, bundleToKeepId]);
+
+        // Merge dependency bundle graph
+        for (let dependencyNodeId of dependencyBundleGraph.getNodeIdsConnectedTo(dependencyBundleGraph.getNodeIdByContentKey(String(bundleToRemoveId)), _graph().ALL_EDGE_TYPES)) {
+          let dependencyNode = (0, _nullthrows().default)(dependencyBundleGraph.getNode(dependencyNodeId));
+          (0, _assert().default)(dependencyNode.type === 'dependency');
+
+          // Add dependency to the bundle to keep
+          dependencyBundleGraph.addEdge(dependencyNodeId, dependencyBundleGraph.getNodeIdByContentKey(String(bundleToKeepId)), dependencyPriorityEdges[dependencyNode.value.priority]);
+          // Remove dependency from the bundle to remove
+          dependencyBundleGraph.removeEdge(dependencyNodeId, dependencyBundleGraph.getNodeIdByContentKey(String(bundleToRemoveId)), dependencyPriorityEdges[dependencyNode.value.priority]);
+        }
+      }
+    }
     bundleGraph.removeNode(bundleToRemoveId);
   }
   function mergeOverlapBundles(mergeConfig) {
@@ -1044,11 +1174,16 @@ function createIdealGraph(assetGraph, config, entries, logger) {
         })
       };
     }));
+    let mergedBundles = new Set();
     for (let cluster of clusters) {
       let [mergeTarget, ...rest] = cluster;
       for (let bundleIdToMerge of rest) {
-        mergeBundles(bundleGraph, mergeTarget, bundleIdToMerge, assetReference);
+        mergeBundles(mergeTarget, bundleIdToMerge);
       }
+      mergedBundles.add(mergeTarget);
+    }
+    if ((0, _featureFlags().getFeatureFlag)('supportWebpackChunkName')) {
+      return mergedBundles;
     }
   }
   function getBigIntFromContentKey(contentKey) {
@@ -1060,10 +1195,7 @@ function createIdealGraph(assetGraph, config, entries, logger) {
   if (modifiedSourceBundles.size > 0) {
     let assetOrderMap = new Map(assets.map((a, index) => [a, index]));
     for (let bundle of modifiedSourceBundles) {
-      // @ts-expect-error TS18046
-      bundle.assets = new Set(
-      // @ts-expect-error TS18046
-      [...bundle.assets].sort((a, b) => {
+      bundle.assets = new Set([...bundle.assets].sort((a, b) => {
         let aIndex = (0, _nullthrows().default)(assetOrderMap.get(a));
         let bIndex = (0, _nullthrows().default)(assetOrderMap.get(b));
         return aIndex - bIndex;
@@ -1151,6 +1283,7 @@ function createBundle(opts) {
       bundleBehavior: opts.bundleBehavior,
       env: (0, _nullthrows().default)(opts.env),
       mainEntryAsset: null,
+      bundleRoots: new Set(),
       manualSharedBundle: opts.manualSharedBundle,
       needsStableName: Boolean(opts.needsStableName),
       size: 0,
@@ -1166,6 +1299,7 @@ function createBundle(opts) {
     bundleBehavior: opts.bundleBehavior ?? asset.bundleBehavior,
     env: opts.env ?? asset.env,
     mainEntryAsset: asset,
+    bundleRoots: new Set([asset]),
     manualSharedBundle: opts.manualSharedBundle,
     needsStableName: Boolean(opts.needsStableName),
     size: asset.stats.size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaspack/bundler-default",
-  "version": "3.1.3-typescript-bc4459c37.0",
+  "version": "3.2.1-typescript-5ad950d33.0",
   "license": "(MIT OR Apache-2.0)",
   "type": "commonjs",
   "publishConfig": {
@@ -17,17 +17,17 @@
     "node": ">= 16.0.0"
   },
   "dependencies": {
-    "@atlaspack/diagnostic": "2.14.2-typescript-bc4459c37.0",
-    "@atlaspack/feature-flags": "2.19.3-typescript-bc4459c37.0",
-    "@atlaspack/graph": "3.5.10-typescript-bc4459c37.0",
-    "@atlaspack/plugin": "2.14.21-typescript-bc4459c37.0",
-    "@atlaspack/rust": "3.4.2-typescript-bc4459c37.0",
-    "@atlaspack/utils": "2.17.3-typescript-bc4459c37.0",
+    "@atlaspack/diagnostic": "2.14.2-typescript-5ad950d33.0",
+    "@atlaspack/feature-flags": "2.20.1-typescript-5ad950d33.0",
+    "@atlaspack/graph": "3.5.11-typescript-5ad950d33.0",
+    "@atlaspack/plugin": "2.14.22-typescript-5ad950d33.0",
+    "@atlaspack/rust": "3.4.2-typescript-5ad950d33.0",
+    "@atlaspack/utils": "2.17.4-typescript-5ad950d33.0",
     "many-keys-map": "^1.0.3",
     "nullthrows": "^1.1.1"
   },
   "scripts": {
     "check-ts": "tsc --emitDeclarationOnly --rootDir src"
   },
-  "gitHead": "bc4459c37a38ef1f74772126637e1d8841d1fcb0"
+  "gitHead": "5ad950d33a5f2255ebeb10c04a2e84c346e2de85"
 }

package/src/decorateLegacyGraph.ts

@@ -23,11 +23,13 @@ export function decorateLegacyGraph(
     bundleGroupBundleIds,
     manualAssetToBundle,
   } = idealGraph;
+  // This line can be deleted once supportWebpackChunkName feature flag is removed.
   let entryBundleToBundleGroup: Map<NodeId, BundleGroup> = new Map();
   // Step Create Bundles: Create bundle groups, bundles, and shared bundles and add assets to them
   for (let [bundleNodeId, idealBundle] of idealBundleGraph.nodes.entries()) {
     if (!idealBundle || idealBundle === 'root') continue;
     let entryAsset = idealBundle.mainEntryAsset;
+    // This line can be deleted once supportWebpackChunkName feature flag is removed.
     let bundleGroup;
     let bundle;
 
@@ -50,18 +52,26 @@ export function decorateLegacyGraph(
         entryAsset != null,
         'Processing a bundleGroup with no entry asset',
       );
+
+      let bundleGroups = new Map();
       for (let dependency of dependencies) {
         bundleGroup = bundleGraph.createBundleGroup(
           dependency,
           idealBundle.target,
         );
+        bundleGroups.set(bundleGroup.entryAssetId, bundleGroup);
+      }
+      if (getFeatureFlag('supportWebpackChunkName')) {
+        invariant(bundleGroups.size > 0, 'No bundle groups created');
+      } else {
+        invariant(bundleGroup);
+        entryBundleToBundleGroup.set(bundleNodeId, bundleGroup);
       }
-      invariant(bundleGroup);
-      entryBundleToBundleGroup.set(bundleNodeId, bundleGroup);
 
       bundle = nullthrows(
         bundleGraph.createBundle({
           entryAsset: nullthrows(entryAsset),
+          bundleRoots: Array.from(idealBundle.bundleRoots),
           needsStableName: idealBundle.needsStableName,
           bundleBehavior: idealBundle.bundleBehavior,
           target: idealBundle.target,
@@ -69,7 +79,14 @@ export function decorateLegacyGraph(
         }),
       );
 
-      bundleGraph.addBundleToBundleGroup(bundle, bundleGroup);
+      if (getFeatureFlag('supportWebpackChunkName')) {
+        for (let bundleGroup of bundleGroups.values()) {
+          bundleGraph.addBundleToBundleGroup(bundle, bundleGroup);
+        }
+      } else {
+        invariant(bundleGroup);
+        bundleGraph.addBundleToBundleGroup(bundle, bundleGroup);
+      }
     } else if (
       idealBundle.sourceBundles.size > 0 &&
       !idealBundle.mainEntryAsset
@@ -107,6 +124,7 @@ export function decorateLegacyGraph(
       bundle = nullthrows(
         bundleGraph.createBundle({
           entryAsset,
+          bundleRoots: Array.from(idealBundle.bundleRoots),
           needsStableName: idealBundle.needsStableName,
           bundleBehavior: idealBundle.bundleBehavior,
           target: idealBundle.target,

package/src/idealGraph.ts

@@ -34,6 +34,7 @@ export type Bundle = {
   bundleBehavior?: BundleBehavior | null | undefined;
   needsStableName: boolean;
   mainEntryAsset: Asset | null | undefined;
+  bundleRoots: Set<Asset>;
   size: number;
   sourceBundles: Set<NodeId>;
   target: Target;
@@ -83,6 +84,16 @@ export type IdealGraph = {
   manualAssetToBundle: Map<Asset, NodeId>;
 };
 
+function isNonRootBundle(
+  bundle?: Bundle | 'root' | null,
+  message?: string,
+): Bundle {
+  let existingBundle = nullthrows(bundle, message);
+  invariant(existingBundle !== 'root', "Bundle cannot be 'root'");
+
+  return existingBundle;
+}
+
 export function createIdealGraph(
   assetGraph: MutableBundleGraph,
   config: ResolvedBundlerConfig,
@@ -1102,6 +1113,8 @@ export function createIdealGraph(
   }
 
   let manualSharedBundleIds = new Set([...manualSharedMap.values()]);
+  let modifiedSourceBundles = new Set<Bundle>();
+
   // Step split manual shared bundles for those that have the "split" property set
   let remainderMap = new DefaultMap(() => []);
   for (let id of manualSharedMap.values()) {
@@ -1180,6 +1193,80 @@ export function createIdealGraph(
     }
   }
 
+  if (getFeatureFlag('supportWebpackChunkName')) {
+    // Merge webpack chunk name bundles
+    let chunkNameBundles = new DefaultMap(() => new Set());
+    for (let [nodeId, node] of dependencyBundleGraph.nodes.entries()) {
+      // meta.chunkName is set by the Rust transformer, so we just need to find
+      // bundles that have a chunkName set.
+      if (
+        !node ||
+        node.type !== 'dependency' ||
+        node.value.meta.chunkName == null
+      ) {
+        continue;
+      }
+
+      let connectedBundles = dependencyBundleGraph.getNodeIdsConnectedFrom(
+        nodeId,
+        dependencyPriorityEdges[node.value.priority],
+      );
+
+      if (connectedBundles.length === 0) {
+        continue;
+      }
+
+      invariant(
+        connectedBundles.length === 1,
+        'Expected webpackChunkName dependency to be connected to no more than one bundle',
+      );
+
+      let bundleId = connectedBundles[0];
+      let bundleNode = dependencyBundleGraph.getNode(bundleId);
+      invariant(bundleNode != null && bundleNode.type === 'bundle');
+
+      // If a bundle does not have a main entry asset, it's somehow just a
+      // shared bundle, and will be merged/deleted by other means.
+      if (bundleNode.value.mainEntryAsset == null) {
+        continue;
+      }
+
+      let bundleNodeId = null;
+      let mainEntryAssetId = bundleNode.value.mainEntryAsset?.id;
+
+      if (mainEntryAssetId != null) {
+        bundleNodeId = bundles.get(mainEntryAssetId);
+      }
+
+      if (bundleNodeId == null) {
+        continue;
+      }
+
+      chunkNameBundles
+        .get(node.value.meta.chunkName)
+        // DependencyBundleGraph uses content keys as node ids, so we can use that
+        // to get the bundle id.
+        .add(bundleNodeId);
+    }
+
+    for (let [chunkName, bundleIds] of chunkNameBundles.entries()) {
+      // The `[request]` placeholder is not yet supported
+      if (
+        bundleIds.size <= 1 ||
+        (typeof chunkName === 'string' && chunkName.includes('[request]'))
+      ) {
+        continue; // Nothing to merge
+      }
+
+      // Merge all bundles with the same chunk name into the first one.
+      let [firstBundleId, ...rest] = Array.from(bundleIds);
+      for (let bundleId of rest) {
+        // @ts-expect-error TS2345
+        mergeBundles(firstBundleId, bundleId);
+      }
+    }
+  }
+
   // Step merge shared bundles that meet the overlap threshold
   // This step is skipped by default as the threshold defaults to 1
   if (config.sharedBundleMerge && config.sharedBundleMerge.length > 0) {
@@ -1202,7 +1289,6 @@ export function createIdealGraph(
   }
 
   // Step Remove Shared Bundles: Remove shared bundles from bundle groups that hit the parallel request limit.
-  let modifiedSourceBundles = new Set();
 
   if (config.disableSharedBundles === false) {
     for (let bundleGroupId of bundleGraph.getNodeIdsConnectedFrom(rootNodeId)) {
@@ -1310,15 +1396,16 @@ export function createIdealGraph(
     }
   }
 
-  function mergeBundles(
-    bundleGraph: IdealBundleGraph,
-    bundleToKeepId: NodeId,
-    bundleToRemoveId: NodeId,
-    assetReference: DefaultMap<Asset, Array<[Dependency, Bundle]>>,
-  ) {
-    let bundleToKeep = nullthrows(bundleGraph.getNode(bundleToKeepId));
-    let bundleToRemove = nullthrows(bundleGraph.getNode(bundleToRemoveId));
-    invariant(bundleToKeep !== 'root' && bundleToRemove !== 'root');
+  function mergeBundles(bundleToKeepId: NodeId, bundleToRemoveId: NodeId) {
+    let bundleToKeep = isNonRootBundle(
+      bundleGraph.getNode(bundleToKeepId),
+      `Bundle ${bundleToKeepId} not found`,
+    );
+    let bundleToRemove = isNonRootBundle(
+      bundleGraph.getNode(bundleToRemoveId),
+      `Bundle ${bundleToRemoveId} not found`,
+    );
+    modifiedSourceBundles.add(bundleToKeep);
     for (let asset of bundleToRemove.assets) {
       bundleToKeep.assets.add(asset);
       bundleToKeep.size += asset.stats.size;
@@ -1334,12 +1421,25 @@ export function createIdealGraph(
     }
 
     // Merge any internalized assets
-    invariant(
-      bundleToKeep.internalizedAssets && bundleToRemove.internalizedAssets,
-      'All shared bundles should have internalized assets',
-    );
-    bundleToKeep.internalizedAssets.union(bundleToRemove.internalizedAssets);
+    if (getFeatureFlag('supportWebpackChunkName')) {
+      if (bundleToKeep.internalizedAssets != null) {
+        if (bundleToRemove.internalizedAssets != null) {
+          bundleToKeep.internalizedAssets.intersect(
+            bundleToRemove.internalizedAssets,
+          );
+        } else {
+          bundleToKeep.internalizedAssets.clear();
+        }
+      }
+    } else {
+      invariant(
+        bundleToKeep.internalizedAssets && bundleToRemove.internalizedAssets,
+        'All shared bundles should have internalized assets',
+      );
+      bundleToKeep.internalizedAssets.union(bundleToRemove.internalizedAssets);
+    }
 
+    // Merge and clean up source bundles
     for (let sourceBundleId of bundleToRemove.sourceBundles) {
       if (bundleToKeep.sourceBundles.has(sourceBundleId)) {
         continue;
@@ -1349,6 +1449,104 @@ export function createIdealGraph(
       bundleGraph.addEdge(sourceBundleId, bundleToKeepId);
     }
 
+    if (getFeatureFlag('supportWebpackChunkName')) {
+      bundleToKeep.sourceBundles.delete(bundleToRemoveId);
+
+      for (let bundle of bundleGraph.getNodeIdsConnectedFrom(
+        bundleToRemoveId,
+      )) {
+        let bundleNode = nullthrows(bundleGraph.getNode(bundle));
+        if (bundleNode === 'root') {
+          continue;
+        }
+
+        // If the bundle is a source bundle, add it to the bundle to keep
+        if (bundleNode.sourceBundles.has(bundleToRemoveId)) {
+          bundleNode.sourceBundles.add(bundleToKeepId);
+          bundleNode.sourceBundles.delete(bundleToRemoveId);
+          bundleGraph.addEdge(bundleToKeepId, bundle);
+        }
+      }
+
+      // Merge bundle roots
+      for (let bundleRoot of bundleToRemove.bundleRoots) {
+        bundleToKeep.bundleRoots.add(bundleRoot);
+      }
+
+      if (bundleToRemove.mainEntryAsset != null) {
+        invariant(bundleToKeep.mainEntryAsset != null);
+
+        // Merge the bundles in bundle group
+        let bundlesInRemoveBundleGroup =
+          getBundlesForBundleGroup(bundleToRemoveId);
+
+        for (let bundleIdInGroup of bundlesInRemoveBundleGroup) {
+          if (bundleIdInGroup === bundleToRemoveId) {
+            continue;
+          }
+          bundleGraph.addEdge(bundleToKeepId, bundleIdInGroup);
+        }
+
+        // Remove old bundle group
+        bundleGroupBundleIds.delete(bundleToRemoveId);
+
+        // Clean up bundle roots
+        let bundleRootToRemoveNodeId = nullthrows(
+          assetToBundleRootNodeId.get(
+            nullthrows(bundleToRemove.mainEntryAsset),
+          ),
+        );
+        let bundleRootToKeepNodeId = nullthrows(
+          assetToBundleRootNodeId.get(nullthrows(bundleToKeep.mainEntryAsset)),
+        );
+
+        for (let nodeId of bundleRootGraph.getNodeIdsConnectedTo(
+          bundleRootToRemoveNodeId,
+        )) {
+          bundleRootGraph.addEdge(nodeId, bundleRootToKeepNodeId);
+          bundleRootGraph.removeEdge(nodeId, bundleRootToRemoveNodeId);
+        }
+
+        for (let nodeId of bundleRootGraph.getNodeIdsConnectedFrom(
+          bundleRootToRemoveNodeId,
+        )) {
+          bundleRootGraph.addEdge(bundleRootToKeepNodeId, nodeId);
+          bundleRootGraph.removeEdge(bundleRootToRemoveNodeId, nodeId);
+        }
+
+        bundleRoots.set(nullthrows(bundleToRemove.mainEntryAsset), [
+          bundleToKeepId,
+          bundleToKeepId,
+        ]);
+
+        // Merge dependency bundle graph
+        for (let dependencyNodeId of dependencyBundleGraph.getNodeIdsConnectedTo(
+          dependencyBundleGraph.getNodeIdByContentKey(String(bundleToRemoveId)),
+          ALL_EDGE_TYPES,
+        )) {
+          let dependencyNode = nullthrows(
+            dependencyBundleGraph.getNode(dependencyNodeId),
+          );
+          invariant(dependencyNode.type === 'dependency');
+
+          // Add dependency to the bundle to keep
+          dependencyBundleGraph.addEdge(
+            dependencyNodeId,
+            dependencyBundleGraph.getNodeIdByContentKey(String(bundleToKeepId)),
+            dependencyPriorityEdges[dependencyNode.value.priority],
+          );
+          // Remove dependency from the bundle to remove
+          dependencyBundleGraph.removeEdge(
+            dependencyNodeId,
+            dependencyBundleGraph.getNodeIdByContentKey(
+              String(bundleToRemoveId),
+            ),
+            dependencyPriorityEdges[dependencyNode.value.priority],
+          );
+        }
+      }
+    }
+
     bundleGraph.removeNode(bundleToRemoveId);
   }
 
@@ -1400,12 +1598,20 @@ export function createIdealGraph(
       ),
     );
 
+    let mergedBundles = new Set();
+
     for (let cluster of clusters) {
       let [mergeTarget, ...rest] = cluster;
 
       for (let bundleIdToMerge of rest) {
-        mergeBundles(bundleGraph, mergeTarget, bundleIdToMerge, assetReference);
+        mergeBundles(mergeTarget, bundleIdToMerge);
       }
+
+      mergedBundles.add(mergeTarget);
+    }
+
+    if (getFeatureFlag('supportWebpackChunkName')) {
+      return mergedBundles;
     }
   }
 
@@ -1419,9 +1625,7 @@ export function createIdealGraph(
     let assetOrderMap = new Map(assets.map((a, index) => [a, index]));
 
     for (let bundle of modifiedSourceBundles) {
-      // @ts-expect-error TS18046
       bundle.assets = new Set(
-        // @ts-expect-error TS18046
         [...bundle.assets].sort((a, b) => {
           let aIndex = nullthrows(assetOrderMap.get(a));
           let bIndex = nullthrows(assetOrderMap.get(b));
@@ -1539,6 +1743,7 @@ function createBundle(opts: {
       bundleBehavior: opts.bundleBehavior,
       env: nullthrows(opts.env),
       mainEntryAsset: null,
+      bundleRoots: new Set(),
       manualSharedBundle: opts.manualSharedBundle,
       needsStableName: Boolean(opts.needsStableName),
       size: 0,
@@ -1555,6 +1760,7 @@ function createBundle(opts: {
     bundleBehavior: opts.bundleBehavior ?? asset.bundleBehavior,
     env: opts.env ?? asset.env,
     mainEntryAsset: asset,
+    bundleRoots: new Set([asset]),
     manualSharedBundle: opts.manualSharedBundle,
     needsStableName: Boolean(opts.needsStableName),
     size: asset.stats.size,