@atlaspack/bundler-default 2.14.5-canary.14 → 2.14.5-canary.140

package/src/bundleMerge.ts

@@ -0,0 +1,245 @@
+import invariant from 'assert';
+import nullthrows from 'nullthrows';
+import {ContentGraph} from '@atlaspack/graph';
+import type {NodeId} from '@atlaspack/graph';
+import {setUnion, setIntersectStatic} from '@atlaspack/utils';
+import type {Bundle, IdealBundleGraph} from './idealGraph';
+import {memoize, clearCaches} from './memoize';
+
+function getBundlesForBundleGroup(
+  bundleGraph: IdealBundleGraph,
+  bundleGroupId: NodeId,
+): number {
+  let count = 0;
+  bundleGraph.traverse((nodeId) => {
+    // @ts-expect-error TS2339
+    if (bundleGraph.getNode(nodeId)?.bundleBehavior !== 'inline') {
+      count++;
+    }
+  }, bundleGroupId);
+  return count;
+}
+
+let getBundleOverlap = (
+  sourceBundlesA: Set<NodeId>,
+  sourceBundlesB: Set<NodeId>,
+): number => {
+  let allSourceBundles = setUnion(sourceBundlesA, sourceBundlesB);
+  let sharedSourceBundles = setIntersectStatic(sourceBundlesA, sourceBundlesB);
+
+  return sharedSourceBundles.size / allSourceBundles.size;
+};
+
+// Returns a decimal showing the proportion source bundles are common to
+// both bundles versus the total number of source bundles.
+function checkBundleThreshold(
+  bundleA: MergeCandidate,
+  bundleB: MergeCandidate,
+  threshold: number,
+): boolean {
+  return (
+    getBundleOverlap(
+      bundleA.bundle.sourceBundles,
+      bundleB.bundle.sourceBundles,
+    ) >= threshold
+  );
+}
+
+let checkSharedSourceBundles = memoize(
+  (bundle: Bundle, importantAncestorBundles: Array<NodeId>): boolean => {
+    return importantAncestorBundles.every((ancestorId) =>
+      bundle.sourceBundles.has(ancestorId),
+    );
+  },
+);
+
+let hasSuitableBundleGroup = memoize(
+  (
+    bundleGraph: IdealBundleGraph,
+    bundle: Bundle,
+    minBundlesInGroup: number,
+  ): boolean => {
+    for (let sourceBundle of bundle.sourceBundles) {
+      let bundlesInGroup = getBundlesForBundleGroup(bundleGraph, sourceBundle);
+
+      if (bundlesInGroup >= minBundlesInGroup) {
+        return true;
+      }
+    }
+    return false;
+  },
+);
+
+function validMerge(
+  bundleGraph: IdealBundleGraph,
+  config: MergeGroup,
+  bundleA: MergeCandidate,
+  bundleB: MergeCandidate,
+): boolean {
+  if (config.maxBundleSize != null) {
+    if (
+      bundleA.bundle.size > config.maxBundleSize ||
+      bundleB.bundle.size > config.maxBundleSize
+    ) {
+      return false;
+    }
+  }
+
+  if (config.overlapThreshold != null) {
+    if (!checkBundleThreshold(bundleA, bundleB, config.overlapThreshold)) {
+      return false;
+    }
+  }
+
+  if (config.sourceBundles != null) {
+    if (
+      !checkSharedSourceBundles(bundleA.bundle, config.sourceBundles) ||
+      !checkSharedSourceBundles(bundleB.bundle, config.sourceBundles)
+    ) {
+      return false;
+    }
+  }
+
+  if (config.minBundlesInGroup != null) {
+    if (
+      !hasSuitableBundleGroup(
+        bundleGraph,
+        bundleA.bundle,
+        config.minBundlesInGroup,
+      ) ||
+      !hasSuitableBundleGroup(
+        bundleGraph,
+        bundleB.bundle,
+        config.minBundlesInGroup,
+      )
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function getMergeClusters(
+  graph: ContentGraph<NodeId, EdgeType>,
+  candidates: Map<NodeId, EdgeType>,
+): Array<Array<NodeId>> {
+  let clusters: Array<Array<NodeId>> = [];
+
+  for (let [candidate, edgeType] of candidates.entries()) {
+    let cluster: Array<NodeId> = [];
+
+    graph.traverse(
+      (nodeId) => {
+        cluster.push(nullthrows(graph.getNode(nodeId)));
+        // Remove node from candidates as it has already been processed
+        candidates.delete(nodeId);
+      },
+      candidate,
+      edgeType,
+    );
+    clusters.push(cluster);
+  }
+
+  return clusters;
+}
+
+type MergeCandidate = {
+  bundle: Bundle;
+  id: NodeId;
+  contentKey: string;
+};
+function getPossibleMergeCandidates(
+  bundleGraph: IdealBundleGraph,
+  bundles: Array<NodeId>,
+): Array<[MergeCandidate, MergeCandidate]> {
+  let mergeCandidates = bundles.map((bundleId) => {
+    let bundle = bundleGraph.getNode(bundleId);
+    invariant(bundle && bundle !== 'root', 'Bundle should exist');
+
+    return {
+      id: bundleId,
+      bundle,
+      contentKey: bundleId.toString(),
+    };
+  });
+
+  const uniquePairs: Array<[MergeCandidate, MergeCandidate]> = [];
+
+  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];
+
+      // @ts-expect-error TS18048
+      if (a.bundle.internalizedAssets.equals(b.bundle.internalizedAssets)) {
+        uniquePairs.push([a, b]);
+      }
+    }
+  }
+  return uniquePairs;
+}
+
+export type MergeGroup = {
+  overlapThreshold?: number;
+  maxBundleSize?: number;
+  sourceBundles?: Array<NodeId>;
+  minBundlesInGroup?: number;
+};
+type EdgeType = number;
+
+export function findMergeCandidates(
+  bundleGraph: IdealBundleGraph,
+  bundles: Array<NodeId>,
+  config: Array<MergeGroup>,
+): Array<Array<NodeId>> {
+  let graph = new ContentGraph<NodeId, EdgeType>();
+  let candidates = new Map<NodeId, EdgeType>();
+
+  let allPossibleMergeCandidates = getPossibleMergeCandidates(
+    bundleGraph,
+    bundles,
+  );
+
+  // Build graph of clustered merge candidates
+  for (let i = 0; i < config.length; i++) {
+    // Ensure edge type coresponds to config index
+    let edgeType = i + 1;
+
+    for (let group of allPossibleMergeCandidates) {
+      let candidateA = group[0];
+      let candidateB = group[1];
+
+      if (!validMerge(bundleGraph, config[i], candidateA, candidateB)) {
+        continue;
+      }
+
+      let bundleNode = graph.addNodeByContentKeyIfNeeded(
+        candidateA.contentKey,
+        candidateA.id,
+      );
+      let otherBundleNode = graph.addNodeByContentKeyIfNeeded(
+        candidateB.contentKey,
+        candidateB.id,
+      );
+
+      // Add edge in both directions
+      graph.addEdge(bundleNode, otherBundleNode, edgeType);
+      graph.addEdge(otherBundleNode, bundleNode, edgeType);
+
+      candidates.set(bundleNode, edgeType);
+      candidates.set(otherBundleNode, edgeType);
+    }
+
+    // Remove bundles that have been allocated to a higher priority merge
+    allPossibleMergeCandidates = allPossibleMergeCandidates.filter(
+      (group) =>
+        !graph.hasContentKey(group[0].contentKey) &&
+        !graph.hasContentKey(group[1].contentKey),
+    );
+  }
+
+  clearCaches();
+
+  return getMergeClusters(graph, candidates);
+}

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

@@ -1,5 +1,3 @@
-// @flow strict-local
-
 import {encodeJSONKeyComponent} from '@atlaspack/diagnostic';
 import type {
   Config,
@@ -7,55 +5,63 @@ import type {
   BuildMode,
   PluginLogger,
 } from '@atlaspack/types';
-import {type SchemaEntity, validateSchema} from '@atlaspack/utils';
+import {getFeatureFlag} from '@atlaspack/feature-flags';
+import {SchemaEntity, validateSchema} from '@atlaspack/utils';
 import invariant from 'assert';
 
 type Glob = string;
 
-type ManualSharedBundles = Array<{|
-  name: string,
-  assets: Array<Glob>,
-  types?: Array<string>,
-  root?: string,
-  split?: number,
-|}>;
-
-type BaseBundlerConfig = {|
-  http?: number,
-  minBundles?: number,
-  minBundleSize?: number,
-  maxParallelRequests?: number,
-  disableSharedBundles?: boolean,
-  manualSharedBundles?: ManualSharedBundles,
-  loadConditionalBundlesInParallel?: boolean,
-  sharedBundleMergeThreshold?: number,
-|};
-
-type BundlerConfig = {|
-  [mode: BuildMode]: BaseBundlerConfig,
-|} & BaseBundlerConfig;
-
-export type ResolvedBundlerConfig = {|
-  minBundles: number,
-  minBundleSize: number,
-  maxParallelRequests: number,
-  projectRoot: string,
-  disableSharedBundles: boolean,
-  manualSharedBundles: ManualSharedBundles,
-  loadConditionalBundlesInParallel?: boolean,
-  sharedBundleMergeThreshold: number,
-|};
+type ManualSharedBundles = Array<{
+  name: string;
+  assets: Array<Glob>;
+  types?: Array<string>;
+  root?: string;
+  split?: number;
+}>;
+
+export type MergeCandidates = Array<{
+  overlapThreshold?: number;
+  maxBundleSize?: number;
+  sourceBundles?: Array<string>;
+  minBundlesInGroup?: number;
+}>;
+
+type BaseBundlerConfig = {
+  http?: number;
+  minBundles?: number;
+  minBundleSize?: number;
+  maxParallelRequests?: number;
+  disableSharedBundles?: boolean;
+  manualSharedBundles?: ManualSharedBundles;
+  loadConditionalBundlesInParallel?: boolean;
+  sharedBundleMerge?: MergeCandidates;
+};
+
+type BundlerConfig = Partial<Record<BuildMode, BaseBundlerConfig>> &
+  BaseBundlerConfig;
+
+export type ResolvedBundlerConfig = {
+  minBundles: number;
+  minBundleSize: number;
+  maxParallelRequests: number;
+  projectRoot: string;
+  disableSharedBundles: boolean;
+  manualSharedBundles: ManualSharedBundles;
+  loadConditionalBundlesInParallel?: boolean;
+  sharedBundleMerge?: MergeCandidates;
+};
 
 function resolveModeConfig(
   config: BundlerConfig,
   mode: BuildMode,
 ): BaseBundlerConfig {
-  let generalConfig = {};
-  let modeConfig = {};
+  let generalConfig: Record<string, any> = {};
+  let modeConfig: Record<string, any> = {};
 
   for (const key of Object.keys(config)) {
     if (key === 'development' || key === 'production') {
       if (key === mode) {
+        // @ts-expect-error TS2322
         modeConfig = config[key];
       }
     } else {
@@ -63,7 +69,6 @@ function resolveModeConfig(
     }
   }
 
-  // $FlowFixMe Not sure how to convince flow here...
   return {
     ...generalConfig,
     ...modeConfig,
@@ -78,7 +83,7 @@ const HTTP_OPTIONS = {
     minBundleSize: 30000,
     maxParallelRequests: 6,
     disableSharedBundles: false,
-    sharedBundleMergeThreshold: 1,
+    sharedBundleMerge: [],
   },
   '2': {
     minBundles: 1,
@@ -86,9 +91,9 @@ const HTTP_OPTIONS = {
     minBundleSize: 20000,
     maxParallelRequests: 25,
     disableSharedBundles: false,
-    sharedBundleMergeThreshold: 1,
+    sharedBundleMerge: [],
   },
-};
+} as const;
 
 const CONFIG_SCHEMA: SchemaEntity = {
   type: 'object',
@@ -128,6 +133,30 @@ const CONFIG_SCHEMA: SchemaEntity = {
         additionalProperties: false,
       },
     },
+    sharedBundleMerge: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          overlapThreshold: {
+            type: 'number',
+          },
+          maxBundleSize: {
+            type: 'number',
+          },
+          sourceBundles: {
+            type: 'array',
+            items: {
+              type: 'string',
+            },
+          },
+          minBundlesInGroup: {
+            type: 'number',
+          },
+        },
+        additionalProperties: false,
+      },
+    },
     minBundles: {
       type: 'number',
     },
@@ -155,15 +184,24 @@ export async function loadBundlerConfig(
   options: PluginOptions,
   logger: PluginLogger,
 ): Promise<ResolvedBundlerConfig> {
-  let conf = await config.getConfig<BundlerConfig>([], {
-    packageKey: '@atlaspack/bundler-default',
-  });
+  let conf;
+
+  if (getFeatureFlag('resolveBundlerConfigFromCwd')) {
+    conf = await config.getConfigFrom(`${process.cwd()}/index`, [], {
+      packageKey: '@atlaspack/bundler-default',
+    });
+  } else {
+    conf = await config.getConfig<BundlerConfig>([], {
+      packageKey: '@atlaspack/bundler-default',
+    });
+  }
 
   if (!conf) {
     const modDefault = {
       ...HTTP_OPTIONS['2'],
       projectRoot: options.projectRoot,
-    };
+    } as const;
+    // @ts-expect-error TS2322
     return modDefault;
   }
 
@@ -226,14 +264,14 @@ export async function loadBundlerConfig(
   );
 
   let http = modeConfig.http ?? 2;
+  // @ts-expect-error TS7053
   let defaults = HTTP_OPTIONS[http];
 
   return {
     minBundles: modeConfig.minBundles ?? defaults.minBundles,
     minBundleSize: modeConfig.minBundleSize ?? defaults.minBundleSize,
-    sharedBundleMergeThreshold:
-      modeConfig.sharedBundleMergeThreshold ??
-      defaults.sharedBundleMergeThreshold,
+    sharedBundleMerge:
+      modeConfig.sharedBundleMerge ?? defaults.sharedBundleMerge,
     maxParallelRequests:
       modeConfig.maxParallelRequests ?? defaults.maxParallelRequests,
     projectRoot: options.projectRoot,

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

@@ -1,6 +1,4 @@
-// @flow strict-local
-
-import {ALL_EDGE_TYPES, type NodeId} from '@atlaspack/graph';
+import {ALL_EDGE_TYPES, NodeId} from '@atlaspack/graph';
 import type {
   Bundle as LegacyBundle,
   BundleGroup,
@@ -25,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;
 
@@ -52,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,
@@ -71,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
@@ -109,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,
@@ -195,11 +211,13 @@ export function decorateLegacyGraph(
     }
   }
 
+  // @ts-expect-error TS2488
   for (let {type, from, to} of idealBundleGraph.getAllEdges()) {
     let sourceBundle = nullthrows(idealBundleGraph.getNode(from));
     if (sourceBundle === 'root') {
       continue;
     }
+    // @ts-expect-error TS2367
     invariant(sourceBundle !== 'root');
 
     let legacySourceBundle = nullthrows(
@@ -210,6 +228,7 @@ export function decorateLegacyGraph(
     if (targetBundle === 'root') {
       continue;
     }
+    // @ts-expect-error TS2367
     invariant(targetBundle !== 'root');
     let legacyTargetBundle = nullthrows(
       idealBundleToLegacyBundle.get(targetBundle),