@atlaspack/bundler-default 2.14.5-canary.36 → 2.14.5-canary.361

package/src/{idealGraph.js → idealGraph.ts}

@@ -1,6 +1,5 @@
-// @flow strict-local
-
 import path from 'path';
+import sortedArray from 'sorted-array-functions';
 
 import {getFeatureFlag} from '@atlaspack/feature-flags';
 import {
@@ -8,7 +7,7 @@ import {
   BitSet,
   ContentGraph,
   Graph,
-  type NodeId,
+  NodeId,
 } from '@atlaspack/graph';
 import type {
   Asset,
@@ -18,42 +17,50 @@ import type {
   MutableBundleGraph,
   Target,
   PluginLogger,
+  BundleGraphTraversable,
+  TraversalActions,
 } from '@atlaspack/types';
 import {DefaultMap, globToRegex} from '@atlaspack/utils';
 import invariant from 'assert';
 import nullthrows from 'nullthrows';
 
-import {findMergeCandidates} from './bundleMerge';
-import type {ResolvedBundlerConfig} from './bundlerConfig';
+import {findMergeCandidates, MergeGroup} from './bundleMerge';
+import type {
+  ResolvedBundlerConfig,
+  SharedBundleMergeCandidates,
+  AsyncBundleMerge,
+} from './bundlerConfig';
+import {Stats} from './stats';
 
 /* BundleRoot - An asset that is the main entry of a Bundle. */
 type BundleRoot = Asset;
 
-export type Bundle = {|
-  uniqueKey: ?string,
-  assets: Set<Asset>,
-  internalizedAssets?: BitSet,
-  bundleBehavior?: ?BundleBehavior,
-  needsStableName: boolean,
-  mainEntryAsset: ?Asset,
-  size: number,
-  sourceBundles: Set<NodeId>,
-  target: Target,
-  env: Environment,
-  type: string,
-  manualSharedBundle: ?string, // for naming purposes
-|};
+export type Bundle = {
+  uniqueKey: string | null | undefined;
+  assets: Set<Asset>;
+  internalizedAssets?: BitSet;
+  bundleBehavior?: BundleBehavior | null | undefined;
+  needsStableName: boolean;
+  mainEntryAsset: Asset | null | undefined;
+  bundleRoots: Set<Asset>;
+  size: number;
+  sourceBundles: Set<NodeId>;
+  target: Target;
+  env: Environment;
+  type: string;
+  manualSharedBundle: string | null | undefined; // for naming purposes;
+};
 
 export type DependencyBundleGraph = ContentGraph<
-  | {|
-      value: Bundle,
-      type: 'bundle',
-    |}
-  | {|
-      value: Dependency,
-      type: 'dependency',
-    |},
-  number,
+  | {
+      value: Bundle;
+      type: 'bundle';
+    }
+  | {
+      value: Dependency;
+      type: 'dependency';
+    },
+  number
 >;
 
 const dependencyPriorityEdges = {
@@ -61,7 +68,7 @@ const dependencyPriorityEdges = {
   parallel: 2,
   lazy: 3,
   conditional: 4,
-};
+} as const;
 
 export const idealBundleGraphEdges = Object.freeze({
   default: 1,
@@ -70,20 +77,30 @@ export const idealBundleGraphEdges = Object.freeze({
 
 export type IdealBundleGraph = Graph<
   Bundle | 'root',
-  $Values<typeof idealBundleGraphEdges>,
+  (typeof idealBundleGraphEdges)[keyof typeof idealBundleGraphEdges]
 >;
 
 // IdealGraph is the structure we will pass to decorate,
 // which mutates the assetGraph into the bundleGraph we would
 // expect from default bundler
-export type IdealGraph = {|
-  assetReference: DefaultMap<Asset, Array<[Dependency, Bundle]>>,
-  assets: Array<Asset>,
-  bundleGraph: IdealBundleGraph,
-  bundleGroupBundleIds: Set<NodeId>,
-  dependencyBundleGraph: DependencyBundleGraph,
-  manualAssetToBundle: Map<Asset, NodeId>,
-|};
+export type IdealGraph = {
+  assetReference: DefaultMap<Asset, Array<[Dependency, Bundle]>>;
+  assets: Array<Asset>;
+  bundleGraph: IdealBundleGraph;
+  bundleGroupBundleIds: Set<NodeId>;
+  dependencyBundleGraph: DependencyBundleGraph;
+  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,
@@ -97,8 +114,9 @@ export function createIdealGraph(
   let dependencyBundleGraph: DependencyBundleGraph = new ContentGraph();
   let assetReference: DefaultMap<
     Asset,
-    Array<[Dependency, Bundle]>,
+    Array<[Dependency, Bundle]>
   > = new DefaultMap(() => []);
+  let stats = new Stats(config.projectRoot);
 
   // A Graph of Bundles and a root node (dummy string), which models only Bundles, and connections to their
   // referencing Bundle. There are no actual BundleGroup nodes, just bundles that take on that role.
@@ -111,8 +129,9 @@ export function createIdealGraph(
   };
   // Graph that models bundleRoots, with parallel & async deps only to inform reachability
   let bundleRootGraph: Graph<
-    number, // asset index
-    $Values<typeof bundleRootEdgeTypes>,
+    // asset index
+    number,
+    (typeof bundleRootEdgeTypes)[keyof typeof bundleRootEdgeTypes]
   > = new Graph();
   let assetToBundleRootNodeId = new Map<BundleRoot, number>();
 
@@ -146,26 +165,47 @@ export function createIdealGraph(
     bundleGroupBundleIds.add(nodeId);
   }
 
-  let assets = [];
+  let assets: Array<Asset> = [];
   let assetToIndex = new Map<Asset, number>();
 
-  function makeManualAssetToConfigLookup() {
-    let manualAssetToConfig = new Map();
-    let constantModuleToMSB = new DefaultMap(() => []);
+  function makeManualAssetToConfigLookup(): {
+    manualAssetToConfig: Map<
+      Asset,
+      ResolvedBundlerConfig['manualSharedBundles'][number]
+    >;
+    constantModuleToMSB: DefaultMap<
+      Asset,
+      Array<ResolvedBundlerConfig['manualSharedBundles'][number]>
+    >;
+  } {
+    let manualAssetToConfig = new Map<
+      Asset,
+      ResolvedBundlerConfig['manualSharedBundles'][number]
+    >();
+    let constantModuleToMSB = new DefaultMap<
+      Asset,
+      Array<ResolvedBundlerConfig['manualSharedBundles'][number]>
+    >(() => []);
 
     if (config.manualSharedBundles.length === 0) {
       return {manualAssetToConfig, constantModuleToMSB};
     }
 
-    let parentsToConfig = new DefaultMap(() => []);
+    let parentsToConfig = new DefaultMap<
+      string,
+      Array<ResolvedBundlerConfig['manualSharedBundles'][number]>
+    >(() => []);
 
     for (let c of config.manualSharedBundles) {
       if (c.root != null) {
         parentsToConfig.get(path.join(config.projectRoot, c.root)).push(c);
       }
     }
-    let numParentsToFind = parentsToConfig.size;
-    let configToParentAsset = new Map();
+    let numParentsToFind: number = parentsToConfig.size;
+    let configToParentAsset = new Map<
+      ResolvedBundlerConfig['manualSharedBundles'][number],
+      Asset
+    >();
 
     assetGraph.traverse((node, _, actions) => {
       if (node.type === 'asset' && parentsToConfig.has(node.value.filePath)) {
@@ -192,8 +232,10 @@ export function createIdealGraph(
         continue;
       }
 
-      let parentAsset = configToParentAsset.get(c);
-      let assetRegexes = c.assets.map((glob) => globToRegex(glob));
+      let parentAsset: Asset | undefined = configToParentAsset.get(c);
+      let assetRegexes: Array<RegExp> = c.assets.map((glob) =>
+        globToRegex(glob),
+      );
 
       assetGraph.traverse((node, _, actions) => {
         if (
@@ -204,17 +246,16 @@ export function createIdealGraph(
             config.projectRoot,
             node.value.filePath,
           );
-          if (!assetRegexes.some((regex) => regex.test(projectRelativePath))) {
-            return;
-          }
 
           // We track all matching MSB's for constant modules as they are never duplicated
           // and need to be assigned to all matching bundles
           if (node.value.meta.isConstantModule === true) {
             constantModuleToMSB.get(node.value).push(c);
           }
-          manualAssetToConfig.set(node.value, c);
-          return;
+
+          if (assetRegexes.some((regex) => regex.test(projectRelativePath))) {
+            manualAssetToConfig.set(node.value, c);
+          }
         }
 
         if (
@@ -242,9 +283,19 @@ export function createIdealGraph(
     makeManualAssetToConfigLookup();
   let manualBundleToInternalizedAsset: DefaultMap<
     NodeId,
-    Array<Asset>,
+    Array<Asset>
   > = new DefaultMap(() => []);
 
+  let mergeSourceBundleLookup = new Map<string, NodeId>();
+  let mergeSourceBundleAssets: Set<string> = new Set(
+    config.sharedBundleMerge?.flatMap(
+      (c) =>
+        c.sourceBundles?.map((assetMatch: string) =>
+          path.join(config.projectRoot, assetMatch),
+        ) ?? [],
+    ),
+  );
+
   /**
    * Step Create Bundles: Traverse the assetGraph (aka MutableBundleGraph) and create bundles
    * for asset type changes, parallel, inline, and async or lazy dependencies,
@@ -252,7 +303,26 @@ export function createIdealGraph(
    */
   assetGraph.traverse(
     {
-      enter(node, context, actions) {
+      enter(
+        node:
+          | BundleGraphTraversable
+          | {
+              readonly type: 'dependency';
+              value: Dependency;
+            },
+        context:
+          | {
+              readonly type: 'asset';
+              value: Asset;
+            }
+          | null
+          | undefined
+          | {
+              readonly type: 'dependency';
+              value: Dependency;
+            },
+        actions: TraversalActions,
+      ) {
         if (node.type === 'asset') {
           if (
             context?.type === 'dependency' &&
@@ -288,12 +358,16 @@ export function createIdealGraph(
           }
 
           for (let childAsset of assets) {
-            let bundleId = bundles.get(childAsset.id);
-            let bundle;
+            let bundleId: number | undefined | null = bundles.get(
+              childAsset.id,
+            );
+            let bundle: Bundle | 'root' | undefined;
 
             // MSB Step 1: Match glob on filepath and type for any asset
-            let manualSharedBundleKey;
-            let manualSharedObject = manualAssetToConfig.get(childAsset);
+            let manualSharedBundleKey: string | undefined;
+            let manualSharedObject:
+              | ResolvedBundlerConfig['manualSharedBundles'][number]
+              | undefined = manualAssetToConfig.get(childAsset);
 
             if (manualSharedObject) {
               // MSB Step 2: Generate a key for which to look up this manual bundle with
@@ -312,7 +386,8 @@ export function createIdealGraph(
               dependency.priority === 'lazy' ||
               (getFeatureFlag('conditionalBundlingApi') &&
                 node.value.priority === 'conditional') ||
-              childAsset.bundleBehavior === 'isolated' // An isolated Dependency, or Bundle must contain all assets it needs to load.
+              childAsset.bundleBehavior === 'isolated' || // An isolated Dependency, or Bundle must contain all assets it needs to load.
+              childAsset.bundleBehavior === 'inlineIsolated'
             ) {
               if (bundleId == null) {
                 let firstBundleGroup = nullthrows(
@@ -325,7 +400,9 @@ export function createIdealGraph(
                     dependency.bundleBehavior ?? childAsset.bundleBehavior,
                   needsStableName:
                     dependency.bundleBehavior === 'inline' ||
-                    childAsset.bundleBehavior === 'inline'
+                    childAsset.bundleBehavior === 'inline' ||
+                    dependency.bundleBehavior === 'inlineIsolated' ||
+                    childAsset.bundleBehavior === 'inlineIsolated'
                       ? false
                       : dependency.isEntry || dependency.needsStableName,
                   target: firstBundleGroup.target,
@@ -335,6 +412,14 @@ export function createIdealGraph(
                 bundleRoots.set(childAsset, [bundleId, bundleId]);
                 bundleGroupBundleIds.add(bundleId);
                 bundleGraph.addEdge(bundleGraphRootNodeId, bundleId);
+                // If this asset is relevant for merging then track it's source
+                // bundle id for later
+                if (mergeSourceBundleAssets.has(childAsset.filePath)) {
+                  mergeSourceBundleLookup.set(
+                    path.relative(config.projectRoot, childAsset.filePath),
+                    bundleId,
+                  );
+                }
                 if (manualSharedObject) {
                   // MSB Step 4: If this was the first instance of a match, mark mainAsset for internalization
                   // since MSBs should not have main entry assets
@@ -349,7 +434,8 @@ export function createIdealGraph(
                 if (
                   // If this dependency requests isolated, but the bundle is not,
                   // make the bundle isolated for all uses.
-                  dependency.bundleBehavior === 'isolated' &&
+                  (dependency.bundleBehavior === 'isolated' ||
+                    dependency.bundleBehavior === 'inlineIsolated') &&
                   bundle.bundleBehavior == null
                 ) {
                   bundle.bundleBehavior = dependency.bundleBehavior;
@@ -371,7 +457,9 @@ export function createIdealGraph(
                     type: 'bundle',
                   },
                 ),
-                dependencyPriorityEdges[dependency.priority],
+                dependencyPriorityEdges[
+                  dependency.priority as keyof typeof dependencyPriorityEdges
+                ],
               );
 
               if (
@@ -432,6 +520,7 @@ export function createIdealGraph(
                   needsStableName:
                     childAsset.bundleBehavior === 'inline' ||
                     dependency.bundleBehavior === 'inline' ||
+                    dependency.bundleBehavior === 'inlineIsolated' ||
                     (dependency.priority === 'parallel' &&
                       !dependency.needsStableName)
                       ? false
@@ -439,13 +528,15 @@ export function createIdealGraph(
                 });
                 bundleId = bundleGraph.addNode(bundle);
               } else {
-                bundle = bundleGraph.getNode(bundleId);
-                invariant(bundle != null && bundle !== 'root');
+                let bundleNode = bundleGraph.getNode(bundleId);
+                invariant(bundleNode != null && bundleNode !== 'root');
 
+                bundle = bundleNode;
                 if (
                   // If this dependency requests isolated, but the bundle is not,
                   // make the bundle isolated for all uses.
-                  dependency.bundleBehavior === 'isolated' &&
+                  (dependency.bundleBehavior === 'isolated' ||
+                    dependency.bundleBehavior === 'inlineIsolated') &&
                   bundle.bundleBehavior == null
                 ) {
                   bundle.bundleBehavior = dependency.bundleBehavior;
@@ -515,7 +606,7 @@ export function createIdealGraph(
         }
         return node;
       },
-      exit(node) {
+      exit(node: BundleGraphTraversable): undefined {
         if (stack[stack.length - 1]?.[0] === node.value) {
           stack.pop();
         }
@@ -564,22 +655,22 @@ export function createIdealGraph(
 
   // reachableRoots is an array of bit sets for each asset. Each bit set
   // indicates which bundle roots are reachable from that asset synchronously.
-  let reachableRoots = [];
+  let reachableRoots: Array<BitSet> = [];
   for (let i = 0; i < assets.length; i++) {
     reachableRoots.push(new BitSet(bundleRootGraph.nodes.length));
   }
 
   // reachableAssets is the inverse mapping of reachableRoots. For each bundle root,
   // it contains a bit set that indicates which assets are reachable from it.
-  let reachableAssets = [];
+  let reachableAssets: Array<BitSet> = [];
 
   // ancestorAssets maps bundle roots to the set of all assets available to it at runtime,
   // including in earlier parallel bundles. These are intersected through all paths to
   // the bundle to ensure that the available assets are always present no matter in which
   // order the bundles are loaded.
-  let ancestorAssets = [];
+  let ancestorAssets: Array<null | BitSet> = [];
 
-  let inlineConstantDeps = new DefaultMap(() => new Set());
+  let inlineConstantDeps = new DefaultMap<Asset, Set<Asset>>(() => new Set());
 
   for (let [bundleRootId, assetId] of bundleRootGraph.nodes.entries()) {
     let reachable = new BitSet(assets.length);
@@ -688,7 +779,10 @@ export function createIdealGraph(
     // not true that a bundle's available assets = all assets of all the bundleGroups
     // it belongs to. It's the intersection of those sets.
     let available;
-    if (bundleRoot.bundleBehavior === 'isolated') {
+    if (
+      bundleRoot.bundleBehavior === 'isolated' ||
+      bundleRoot.bundleBehavior === 'inlineIsolated'
+    ) {
       available = new BitSet(assets.length);
     } else {
       available = nullthrows(ancestorAssets[nodeId]).clone();
@@ -772,7 +866,8 @@ export function createIdealGraph(
 
     let parentRoots = bundleRootGraph.getNodeIdsConnectedTo(id, ALL_EDGE_TYPES);
     let canDelete =
-      getBundleFromBundleRoot(bundleRoot).bundleBehavior !== 'isolated';
+      getBundleFromBundleRoot(bundleRoot).bundleBehavior !== 'isolated' &&
+      getBundleFromBundleRoot(bundleRoot).bundleBehavior !== 'inlineIsolated';
     if (parentRoots.length === 0) continue;
     for (let parentId of parentRoots) {
       if (parentId === rootNodeId) {
@@ -820,8 +915,10 @@ export function createIdealGraph(
   let reachableNonEntries = new BitSet(assets.length);
   let reachableIntersection = new BitSet(assets.length);
   for (let i = 0; i < assets.length; i++) {
-    let asset = assets[i];
-    let manualSharedObject = manualAssetToConfig.get(asset);
+    let asset: Asset = assets[i];
+    let manualSharedObject:
+      | ResolvedBundlerConfig['manualSharedBundles'][number]
+      | undefined = manualAssetToConfig.get(asset);
 
     if (bundleRoots.has(asset) && inlineConstantDeps.get(asset).size > 0) {
       let entryBundleId = nullthrows(bundleRoots.get(asset))[0];
@@ -849,7 +946,8 @@ export function createIdealGraph(
         !a.isBundleSplittable ||
         (bundleRoots.get(a) &&
           (getBundleFromBundleRoot(a).needsStableName ||
-            getBundleFromBundleRoot(a).bundleBehavior === 'isolated'))
+            getBundleFromBundleRoot(a).bundleBehavior === 'isolated' ||
+            getBundleFromBundleRoot(a).bundleBehavior === 'inlineIsolated'))
       ) {
         // Add asset to non-splittable bundles.
         addAssetToBundleRoot(asset, a);
@@ -864,10 +962,11 @@ export function createIdealGraph(
 
     // If we encounter a "manual" asset, draw an edge from reachable to its MSB
     if (manualSharedObject && !reachable.empty()) {
-      let bundle;
-      let bundleId;
-      let manualSharedBundleKey = manualSharedObject.name + ',' + asset.type;
-      let sourceBundles = [];
+      let bundle: Bundle | undefined;
+      let bundleId: NodeId | undefined;
+      let manualSharedBundleKey: string =
+        manualSharedObject.name + ',' + asset.type;
+      let sourceBundles: Array<NodeId> = [];
       reachable.forEach((id) => {
         sourceBundles.push(nullthrows(bundleRoots.get(assets[id]))[0]);
       });
@@ -891,12 +990,14 @@ export function createIdealGraph(
         manualSharedMap.set(manualSharedBundleKey, bundleId);
       } else {
         bundleId = nullthrows(manualSharedMap.get(manualSharedBundleKey));
-        bundle = nullthrows(bundleGraph.getNode(bundleId));
+        let bundleNode = nullthrows(bundleGraph.getNode(bundleId));
         invariant(
-          bundle != null && bundle !== 'root',
+          bundleNode != null && bundleNode !== 'root',
           'We tried to use the root incorrectly',
         );
 
+        bundle = bundleNode;
+
         if (!bundle.assets.has(asset)) {
           bundle.assets.add(asset);
           bundle.size += asset.stats.size;
@@ -982,7 +1083,7 @@ export function createIdealGraph(
       });
     }
 
-    let reachableArray = [];
+    let reachableArray: Array<Asset> = [];
     reachable.forEach((id) => {
       reachableArray.push(assets[id]);
     });
@@ -992,12 +1093,13 @@ export function createIdealGraph(
       config.disableSharedBundles === false &&
       reachableArray.length > config.minBundles
     ) {
-      let sourceBundles = reachableArray.map(
+      let sourceBundles: Array<NodeId> = reachableArray.map(
         (a) => nullthrows(bundleRoots.get(a))[0],
       );
-      let key = reachableArray.map((a) => a.id).join(',') + '.' + asset.type;
-      let bundleId = bundles.get(key);
-      let bundle;
+      let key: string =
+        reachableArray.map((a) => a.id).join(',') + '.' + asset.type;
+      let bundleId: NodeId | undefined = bundles.get(key);
+      let bundle: Bundle | undefined;
       if (bundleId == null) {
         let firstSourceBundle = nullthrows(
           bundleGraph.getNode(sourceBundles[0]),
@@ -1028,8 +1130,9 @@ export function createIdealGraph(
         bundleId = bundleGraph.addNode(bundle);
         bundles.set(key, bundleId);
       } else {
-        bundle = nullthrows(bundleGraph.getNode(bundleId));
-        invariant(bundle !== 'root');
+        let bundleNode = nullthrows(bundleGraph.getNode(bundleId));
+        invariant(bundleNode !== 'root');
+        bundle = bundleNode;
       }
       bundle.assets.add(asset);
       bundle.size += asset.stats.size;
@@ -1057,25 +1160,31 @@ 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(() => []);
+  let remainderMap = new DefaultMap<number, Array<Asset>>(() => []);
   for (let id of manualSharedMap.values()) {
     let manualBundle = bundleGraph.getNode(id);
     invariant(manualBundle !== 'root' && manualBundle != null);
 
     if (manualBundle.sourceBundles.size > 0) {
-      let firstSourceBundle = nullthrows(
+      let firstSourceBundleNode: Bundle | 'root' = nullthrows(
         bundleGraph.getNode([...manualBundle.sourceBundles][0]),
       );
-      invariant(firstSourceBundle !== 'root');
-      let firstAsset = [...manualBundle.assets][0];
-      let manualSharedObject = manualAssetToConfig.get(firstAsset);
+      invariant(firstSourceBundleNode !== 'root');
+      let firstSourceBundle = firstSourceBundleNode;
+
+      let firstAsset: Asset = [...manualBundle.assets][0];
+      let manualSharedObject:
+        | ResolvedBundlerConfig['manualSharedBundles'][number]
+        | undefined = manualAssetToConfig.get(firstAsset);
       invariant(manualSharedObject != null);
-      let modNum = manualAssetToConfig.get(firstAsset)?.split;
+      let modNum: number | undefined =
+        manualAssetToConfig.get(firstAsset)?.split;
       if (modNum != null) {
         for (let a of [...manualBundle.assets]) {
           let numRep = getBigIntFromContentKey(a.id);
-          // $FlowFixMe Flow doesn't know about BigInt
           let r = Number(numRep % BigInt(modNum));
 
           remainderMap.get(r).push(a);
@@ -1129,10 +1238,87 @@ export function createIdealGraph(
     }
   }
 
-  // Step merge shared bundles that meet the overlap threshold
-  // This step is skipped by default as the threshold defaults to 1
-  if (config.sharedBundleMergeThreshold < 1) {
-    mergeOverlapBundles();
+  if (getFeatureFlag('supportWebpackChunkName')) {
+    // Merge webpack chunk name bundles
+    let chunkNameBundles = new DefaultMap<string, Set<NodeId>>(() => 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' ||
+        typeof node.value.meta.chunkName !== 'string'
+      ) {
+        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) {
+        mergeBundles(firstBundleId, bundleId, 'webpack-chunk-name');
+      }
+    }
+  }
+
+  // Step merge async bundles that meet the configured params
+  if (config.asyncBundleMerge) {
+    mergeAsyncBundles(config.asyncBundleMerge);
+  }
+
+  // Step merge shared bundles that meet the configured params
+  if (config.sharedBundleMerge && config.sharedBundleMerge.length > 0) {
+    mergeSharedBundles(config.sharedBundleMerge);
   }
 
   // Step Merge Share Bundles: Merge any shared bundles under the minimum bundle size back into
@@ -1151,7 +1337,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)) {
@@ -1165,7 +1350,13 @@ export function createIdealGraph(
       let numBundlesContributingToPRL = bundleIdsInGroup.reduce((count, b) => {
         let bundle = nullthrows(bundleGraph.getNode(b));
         invariant(bundle !== 'root');
-        return count + (bundle.bundleBehavior !== 'inline');
+        return (
+          count +
+          Number(
+            bundle.bundleBehavior !== 'inline' &&
+              bundle.bundleBehavior !== 'inlineIsolated',
+          )
+        );
       }, 0);
 
       if (numBundlesContributingToPRL > config.maxParallelRequests) {
@@ -1200,6 +1391,7 @@ export function createIdealGraph(
           numBundlesContributingToPRL > config.maxParallelRequests
         ) {
           let bundleTuple = sharedBundlesInGroup.pop();
+          if (!bundleTuple) break;
           let bundleToRemove = bundleTuple.bundle;
           let bundleIdToRemove = bundleTuple.id;
           //TODO add integration test where bundles in bunlde group > max parallel request limit & only remove a couple shared bundles
@@ -1257,51 +1449,205 @@ export function createIdealGraph(
   }
 
   function mergeBundles(
-    bundleGraph: IdealBundleGraph,
     bundleToKeepId: NodeId,
     bundleToRemoveId: NodeId,
-    assetReference: DefaultMap<Asset, Array<[Dependency, Bundle]>>,
+    reason: string,
   ) {
-    let bundleToKeep = nullthrows(bundleGraph.getNode(bundleToKeepId));
-    let bundleToRemove = nullthrows(bundleGraph.getNode(bundleToRemoveId));
-    invariant(bundleToKeep !== 'root' && bundleToRemove !== 'root');
+    stats.trackMerge(bundleToKeepId, bundleToRemoveId, reason);
+    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;
 
       let newAssetReference = assetReference
         .get(asset)
-        .map(([dep, bundle]) =>
+        .map(([dep, bundle]): [Dependency, Bundle] =>
           bundle === bundleToRemove ? [dep, bundleToKeep] : [dep, bundle],
         );
 
       assetReference.set(asset, newAssetReference);
     }
 
+    // Merge any internalized assets
+    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;
       }
 
-      bundleToKeep.sourceBundles.add(sourceBundleId);
-      bundleGraph.addEdge(sourceBundleId, bundleToKeepId);
+      if (sourceBundleId !== bundleToKeepId) {
+        bundleToKeep.sourceBundles.add(sourceBundleId);
+        bundleGraph.addEdge(sourceBundleId, bundleToKeepId);
+      }
     }
 
-    // Merge any internalized assets
-    if (bundleToRemove.internalizedAssets) {
-      if (bundleToKeep.internalizedAssets) {
-        bundleToKeep.internalizedAssets.union(
-          bundleToRemove.internalizedAssets,
+    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.delete(bundleToRemoveId);
+          if (bundle !== bundleToKeepId) {
+            bundleNode.sourceBundles.add(bundleToKeepId);
+            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);
+
+        let removedBundleSharedBundles = new Set<NodeId>();
+        for (let bundleIdInGroup of bundlesInRemoveBundleGroup) {
+          if (bundleIdInGroup === bundleToRemoveId) {
+            continue;
+          }
+          bundleGraph.addEdge(bundleToKeepId, bundleIdInGroup);
+          removedBundleSharedBundles.add(bundleIdInGroup);
+        }
+
+        if (getFeatureFlag('removeRedundantSharedBundles')) {
+          // Merge any shared bundles that now have the same source bundles due to
+          // the current bundle merge
+          let sharedBundles = new DefaultMap<string, Array<NodeId>>(() => []);
+          for (let bundleId of removedBundleSharedBundles) {
+            let bundleNode = nullthrows(bundleGraph.getNode(bundleId));
+            invariant(bundleNode !== 'root');
+            if (
+              bundleNode.mainEntryAsset != null ||
+              bundleNode.manualSharedBundle != null
+            ) {
+              continue;
+            }
+
+            let key =
+              Array.from(bundleNode.sourceBundles)
+                .filter((sourceBundle) => sourceBundle !== bundleToRemoveId)
+                .sort()
+                .join(',') +
+              '.' +
+              bundleNode.type;
+
+            sharedBundles.get(key).push(bundleId);
+          }
+
+          for (let sharedBundlesToMerge of sharedBundles.values()) {
+            if (sharedBundlesToMerge.length > 1) {
+              let [firstBundleId, ...rest] = sharedBundlesToMerge;
+              for (let bundleId of rest) {
+                mergeBundles(firstBundleId, bundleId, 'redundant-shared');
+              }
+            }
+          }
+        }
+
+        // Remove old bundle group
+        bundleGroupBundleIds.delete(bundleToRemoveId);
+
+        // Clean up bundle roots
+        let bundleRootToRemoveNodeId = nullthrows(
+          assetToBundleRootNodeId.get(
+            nullthrows(bundleToRemove.mainEntryAsset),
+          ),
         );
-      } else {
-        bundleToKeep.internalizedAssets = bundleToRemove.internalizedAssets;
+        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);
   }
 
-  function mergeOverlapBundles() {
+  function mergeSharedBundles(mergeConfig: SharedBundleMergeCandidates) {
     // Find all shared bundles
     let sharedBundles = new Set<NodeId>();
     bundleGraph.traverse((nodeId) => {
@@ -1331,22 +1677,188 @@ export function createIdealGraph(
     let clusters = findMergeCandidates(
       bundleGraph,
       Array.from(sharedBundles),
-      config.sharedBundleMergeThreshold,
+      mergeConfig.map(
+        (config): MergeGroup => ({
+          ...config,
+          sourceBundles: config.sourceBundles?.map((assetMatch: string) => {
+            let sourceBundleNodeId = mergeSourceBundleLookup.get(assetMatch);
+
+            if (sourceBundleNodeId == null) {
+              throw new Error(
+                `Source bundle ${assetMatch} not found in merge source bundle lookup`,
+              );
+            }
+
+            return sourceBundleNodeId;
+          }),
+        }),
+      ),
     );
 
+    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, 'shared-merge');
       }
+
+      mergedBundles.add(mergeTarget);
+    }
+
+    if (getFeatureFlag('supportWebpackChunkName')) {
+      return mergedBundles;
     }
   }
 
-  function getBigIntFromContentKey(contentKey) {
+  function mergeAsyncBundles({
+    bundleSize,
+    maxOverfetchSize,
+    ignore,
+  }: AsyncBundleMerge) {
+    let mergeCandidates = [];
+    let ignoreRegexes = ignore?.map((glob) => globToRegex(glob)) ?? [];
+
+    let isIgnored = (bundle: Bundle) => {
+      if (!bundle.mainEntryAsset) {
+        return false;
+      }
+
+      let mainEntryFilePath = path.relative(
+        config.projectRoot,
+        nullthrows(bundle.mainEntryAsset).filePath,
+      );
+
+      return ignoreRegexes.some((regex) => regex.test(mainEntryFilePath));
+    };
+
+    for (let [_bundleRootAsset, [bundleRootBundleId]] of bundleRoots) {
+      let bundleRootBundle = nullthrows(
+        bundleGraph.getNode(bundleRootBundleId),
+      );
+      invariant(bundleRootBundle !== 'root');
+
+      if (
+        bundleRootBundle.type === 'js' &&
+        bundleRootBundle.bundleBehavior !== 'inline' &&
+        bundleRootBundle.bundleBehavior !== 'inlineIsolated' &&
+        bundleRootBundle.size <= bundleSize &&
+        !isIgnored(bundleRootBundle)
+      ) {
+        mergeCandidates.push(bundleRootBundleId);
+      }
+    }
+
+    let candidates = [];
+    for (let i = 0; i < mergeCandidates.length; i++) {
+      for (let j = i + 1; j < mergeCandidates.length; j++) {
+        let a = mergeCandidates[i];
+        let b = mergeCandidates[j];
+        if (a === b) continue; // Skip self-comparison
+
+        candidates.push(scoreAsyncMerge(a, b, maxOverfetchSize));
+      }
+    }
+
+    let sortByScore = (
+      a: AsyncBundleMergeCandidate,
+      b: AsyncBundleMergeCandidate,
+    ) => {
+      let diff = a.score - b.score;
+      if (diff > 0) {
+        return 1;
+      } else if (diff < 0) {
+        return -1;
+      }
+      return 0;
+    };
+
+    candidates = candidates
+      .filter(
+        ({overfetchSize, score}) =>
+          overfetchSize <= maxOverfetchSize && score > 0,
+      )
+      .sort(sortByScore);
+
+    // Tracks the bundles that have been merged
+    let merged = new Set<NodeId>();
+    // Tracks the deleted bundles to the bundle they were merged into.
+    let mergeRemap = new Map<NodeId, NodeId>();
+    // Tracks the bundles that have been rescored and added back into the
+    // candidates.
+    let rescored = new DefaultMap<NodeId, Set<NodeId>>(() => new Set());
+
+    do {
+      let [a, b] = nullthrows(candidates.pop()).bundleIds;
+
+      if (
+        bundleGraph.hasNode(a) &&
+        bundleGraph.hasNode(b) &&
+        ((!merged.has(a) && !merged.has(b)) || rescored.get(a).has(b))
+      ) {
+        mergeRemap.set(b, a);
+        merged.add(a);
+        rescored.get(a).clear();
+
+        mergeBundles(a, b, 'async-merge');
+        continue;
+      }
+
+      // One or both of the bundles have been previously merged, so we'll
+      // rescore and add the result back into the list of candidates.
+      let getMergedBundleId = (bundleId: NodeId): NodeId | undefined => {
+        let seen = new Set<NodeId>();
+        while (!bundleGraph.hasNode(bundleId) && !seen.has(bundleId)) {
+          seen.add(bundleId);
+          bundleId = nullthrows(mergeRemap.get(bundleId));
+        }
+
+        if (!bundleGraph.hasNode(bundleId)) {
+          return;
+        }
+
+        return bundleId;
+      };
+
+      // Map a and b to their merged bundle ids if they've already been merged
+      let currentA = getMergedBundleId(a);
+      let currentB = getMergedBundleId(b);
+
+      if (
+        !currentA ||
+        !currentB ||
+        // Bundles are already merged
+        currentA === currentB
+      ) {
+        // This combiniation is not valid, so we skip it.
+        continue;
+      }
+
+      let candidate = scoreAsyncMerge(currentA, currentB, maxOverfetchSize);
+
+      if (candidate.overfetchSize <= maxOverfetchSize && candidate.score > 0) {
+        sortedArray.add(candidates, candidate, sortByScore);
+        rescored.get(currentA).add(currentB);
+      }
+    } while (candidates.length > 0);
+  }
+
+  function getBundle(bundleId: NodeId): Bundle {
+    let bundle = bundleGraph.getNode(bundleId);
+    if (bundle === 'root') {
+      throw new Error(`Cannot access root bundle`);
+    }
+    if (bundle == null) {
+      throw new Error(`Bundle ${bundleId} not found in bundle graph`);
+    }
+
+    return bundle;
+  }
+
+  function getBigIntFromContentKey(contentKey: string) {
     let b = Buffer.alloc(64);
     b.write(contentKey);
-    // $FlowFixMe Flow doesn't have BigInt types in this version
     return b.readBigInt64BE();
   }
   // Fix asset order in source bundles as they are likely now incorrect after shared bundle deletion
@@ -1373,14 +1885,86 @@ export function createIdealGraph(
       bundleRootGraph.removeNode(bundleRootId);
     }
   }
-  function getBundlesForBundleGroup(bundleGroupId) {
-    let bundlesInABundleGroup = [];
+  function getBundlesForBundleGroup(bundleGroupId: NodeId) {
+    let bundlesInABundleGroup: Array<NodeId> = [];
     bundleGraph.traverse((nodeId) => {
       bundlesInABundleGroup.push(nodeId);
     }, bundleGroupId);
     return bundlesInABundleGroup;
   }
 
+  interface AsyncBundleMergeCandidate {
+    overfetchSize: number;
+    score: number;
+    bundleIds: number[];
+  }
+  function scoreAsyncMerge(
+    bundleAId: NodeId,
+    bundleBId: NodeId,
+    maxOverfetchSize: number,
+  ): AsyncBundleMergeCandidate {
+    let bundleGroupA = new Set(getBundlesForBundleGroup(bundleAId));
+    let bundleGroupB = new Set(getBundlesForBundleGroup(bundleBId));
+
+    let overlapSize = 0;
+    let overfetchSize = 0;
+
+    for (let bundleId of new Set([...bundleGroupA, ...bundleGroupB])) {
+      let bundle = getBundle(bundleId);
+
+      if (bundleGroupA.has(bundleId) && bundleGroupB.has(bundleId)) {
+        overlapSize += bundle.size;
+      } else {
+        overfetchSize += bundle.size;
+      }
+    }
+
+    let overlapPercent = overlapSize / (overfetchSize + overlapSize);
+
+    let bundleAParents = getBundleParents(bundleAId);
+    let bundleBParents = getBundleParents(bundleBId);
+
+    let sharedParentOverlap = 0;
+    let sharedParentMismatch = 0;
+
+    for (let bundleId of new Set([...bundleAParents, ...bundleBParents])) {
+      if (bundleAParents.has(bundleId) && bundleBParents.has(bundleId)) {
+        sharedParentOverlap++;
+      } else {
+        sharedParentMismatch++;
+      }
+    }
+
+    let overfetchScore = overfetchSize / maxOverfetchSize;
+    let sharedParentPercent =
+      sharedParentOverlap / (sharedParentOverlap + sharedParentMismatch);
+    let score = sharedParentPercent + overlapPercent + overfetchScore;
+
+    return {
+      overfetchSize,
+      score,
+      bundleIds: [bundleAId, bundleBId],
+    };
+  }
+
+  function getBundleParents(bundleId: NodeId): Set<NodeId> {
+    let parents = new Set<NodeId>();
+    let {bundleRoots} = getBundle(bundleId);
+
+    for (let bundleRoot of bundleRoots) {
+      let bundleRootNodeId = nullthrows(
+        assetToBundleRootNodeId.get(bundleRoot),
+      );
+      for (let parentId of bundleRootGraph.getNodeIdsConnectedTo(
+        bundleRootNodeId,
+        ALL_EDGE_TYPES,
+      )) {
+        parents.add(parentId);
+      }
+    }
+    return parents;
+  }
+
   function getBundleFromBundleRoot(bundleRoot: BundleRoot): Bundle {
     let bundle = bundleGraph.getNode(
       nullthrows(bundleRoots.get(bundleRoot))[0],
@@ -1445,6 +2029,12 @@ export function createIdealGraph(
     bundleGraph.removeNode(bundleId);
   }
 
+  stats.report((bundleId) => {
+    let bundle = bundleGraph.getNode(bundleId);
+    invariant(bundle !== 'root');
+    return bundle;
+  });
+
   return {
     assets,
     bundleGraph,
@@ -1455,23 +2045,24 @@ export function createIdealGraph(
   };
 }
 
-function createBundle(opts: {|
-  asset?: Asset,
-  bundleBehavior?: ?BundleBehavior,
-  env?: Environment,
-  manualSharedBundle?: ?string,
-  needsStableName?: boolean,
-  sourceBundles?: Set<NodeId>,
-  target: Target,
-  type?: string,
-  uniqueKey?: string,
-|}): Bundle {
+function createBundle(opts: {
+  asset?: Asset;
+  bundleBehavior?: BundleBehavior | null | undefined;
+  env?: Environment;
+  manualSharedBundle?: string | null | undefined;
+  needsStableName?: boolean;
+  sourceBundles?: Set<NodeId>;
+  target: Target;
+  type?: string;
+  uniqueKey?: string;
+}): Bundle {
   if (opts.asset == null) {
     return {
       assets: new Set(),
       bundleBehavior: opts.bundleBehavior,
       env: nullthrows(opts.env),
       mainEntryAsset: null,
+      bundleRoots: new Set(),
       manualSharedBundle: opts.manualSharedBundle,
       needsStableName: Boolean(opts.needsStableName),
       size: 0,
@@ -1488,6 +2079,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,