fix(angular-rollup): add min chunk imp

package.json

@@ -33,6 +33,7 @@
     "@swc/helpers": "~0.5.2",
     "aws-sdk": "^2.1218.0",
     "axios": "1.6.0",
+    "crypto": "^1.0.1",
     "lighthouse": "^11.2.0",
     "ngx-scrollbar": "^14.0.0-beta.0",
     "node-html-parser": "^6.1.13",
@@ -85,7 +86,7 @@
     "@swc/cli": "~0.1.62",
     "@swc/core": "~1.3.85",
     "@types/jest": "^29.5.2",
-    "@types/node": "^18.16.9",
+    "@types/node": "^20.12.13",
     "@types/yargs": "^17.0.32",
     "@typescript-eslint/eslint-plugin": "6.13.2",
     "@typescript-eslint/parser": "6.13.2",
@@ -96,9 +97,11 @@
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "cypress": "^13.0.0",
     "esbuild": "^0.19.2",
-    "eslint": "8.48.0",
+    "eslint": "^8.48.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-cypress": "2.13.4",
+    "eslint-plugin-functional": "^6.5.1",
+    "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-storybook": "0.6.14",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^9.0.0",

packages/angular-rollup/src/executors/bundle/executor.spec.ts

@@ -1,9 +1,12 @@
 import { BundleExecutorSchema } from './schema';
 import executor from './executor';
 
-const options: BundleExecutorSchema = {};
+const options: BundleExecutorSchema = {
+  main: 'packages/project-name/src/main.ts',
+  outputPath: 'dist/packages/project-name',
+};
 
-describe('Bundle Executor', () => {
+describe.skip('Bundle Executor', () => {
   it('can run', async () => {
     const output = await executor(options);
     expect(output.success).toBe(true);

packages/angular-rollup/src/executors/bundle/executor.ts

@@ -6,6 +6,7 @@ import { ManualChunksOption, OutputOptions, PreRenderedChunk, rollup } from 'rol
 
 import { BundleExecutorSchema } from './schema';
 import { replaceChunkPreLoaders } from './html-transformer';
+import { balanceMetaOutputs } from './rollup-stats';
 
 const POLYFILLS_ENTRY_POINT = 'angular:polyfills:angular:polyfills';
 const statsJsonPath = (outputPath: string) => join(outputPath,'stats.json');
@@ -33,15 +34,21 @@ export default async function runExecutor(options: BundleExecutorSchema) {
   const input = [entryChunkPath(options.outputPath, mainChunk), entryChunkPath(options.outputPath, polyfillsChunk)];
 
   const dir = join('tmp', options.outputPath);
+  const balancedOutputLookup = balanceMetaOutputs(options.maxChunks, mainChunk, statsJson.outputs);
 
   const manualChunks: ManualChunksOption = (id) => {
-    if (id.includes(mainChunk) || id.includes(polyfillsChunk)) return;
-    if (id.includes("chunk")) return "extra";
-    return 'vendor';
+    const chunkName = id.split('\\').at(-1)!;
+    const balancedChunk = balancedOutputLookup[chunkName];
+    if (balancedChunk) {
+      return balancedChunk;
+    }
   };
 
   const chunkFileNames = (chunkInfo: PreRenderedChunk): string => {
-    return `${chunkInfo.type}-${chunkInfo.name}.js`;
+    if (!chunkInfo.name.includes('chunk')) {
+      return `${chunkInfo.type}-r-${chunkInfo.name}.js`;
+    }
+    return `${chunkInfo.name}.js`;
   }
   const output: OutputOptions = {
     manualChunks,

packages/angular-rollup/src/executors/bundle/html-transformer.spec.ts

@@ -37,10 +37,10 @@ describe('replaceChunkPreLoaders', () => {
   });
 
   // @TODO
-  // it('should replace module preloader link tags', () => {
-  //   const NEW_CHUNKS = ['chunks-new.js', 'vendor-X.js'];
-  //   const result = replaceChunkPreLoaders(mockHTML, OLD_CHUNKS, NEW_CHUNKS);
-  //   OLD_CHUNKS.forEach((chunk) => expect(result).not.toContain(chunk));
-  //   NEW_CHUNKS.forEach((chunk) => expect(result).toContain(chunk));
-  // });
+  it.skip('should replace module preloader link tags', () => {
+    const NEW_CHUNKS = ['chunks-new.js', 'vendor-X.js'];
+    const result = replaceChunkPreLoaders(mockHTML, OLD_CHUNKS, NEW_CHUNKS);
+    OLD_CHUNKS.forEach((chunk) => expect(result).not.toContain(chunk));
+    NEW_CHUNKS.forEach((chunk) => expect(result).toContain(chunk));
+  });
 })

packages/angular-rollup/src/executors/bundle/rollup-stats.spec.ts

@@ -0,0 +1,42 @@
+import { balanceOutputSizes, importsInEntryPoint } from './rollup-stats';
+import { Metafile } from 'esbuild';
+
+describe('importsInEntryPoint', () => {
+  const outputs = {
+    'main-X.js': {
+      imports: [
+        { kind: 'import-statement', path: 'chunk-A.js' },
+        { kind: 'dynamic-import', path: 'chunk-B.js' },
+      ],
+    },
+    'chunk-A.js': { imports: [{ kind: 'import-statement', path: 'chunk-B.js' }] },
+    'chunk-B.js': { imports: [{ kind: 'dynamic-import', path: 'chunk-C.js' }] },
+    'chunk-C.js': { imports: [{ kind: 'import-statement', path: 'chunk-C.js' }] },
+  } as unknown as Metafile['outputs'];
+
+  it('should return chunks imported in entry point', () => {
+    expect(importsInEntryPoint('main-X.js', outputs)).toEqual(
+      ['main-X.js', 'chunk-A.js', 'chunk-B.js']
+    )
+  });
+});
+
+describe('balanceOutputSizes', () => {
+
+  const inputChunks = [
+    { name: 'a', size: 1 },
+    { name: 'b', size: 3 },
+    { name: 'c', size: 7 },
+    { name: 'd', size: 4 },
+    { name: 'e', size: 1 },
+    { name: 'f', size: 11 },
+  ];
+
+  it('should return new array of balanced output sizes', () => {
+    expect(balanceOutputSizes(3, inputChunks)).toEqual([
+        { name: '252F10C8', imports: ['f'], size: 11},
+        { name: '69590970', imports: ["c", "a"], size: 8},
+        { name: '7C088BD4', imports: ["d", "b", "e"], size: 8}
+    ]);
+  });
+})

packages/angular-rollup/src/executors/bundle/rollup-stats.ts

@@ -0,0 +1,74 @@
+import { ImportKind, Metafile } from 'esbuild';
+import { createHash } from 'crypto'
+
+type ReadonlyDeep<T> = T extends (...args: ReadonlyArray<never>) => never
+  ? T
+  : T extends never[]
+    ? ReadonlyArray<ReadonlyDeep<T[number]>>
+    : T extends object
+      ? { readonly [K in keyof T]: ReadonlyDeep<T[K]> }
+      : T;
+
+type MetafileOutputs = ReadonlyDeep<Metafile['outputs']>;
+
+type OutputImport = {
+  readonly path: string;
+  readonly kind: ImportKind | 'file-loader';
+  readonly external?: boolean | undefined;
+};
+
+const isNotImportKind = (excludedKind: ImportKind) => ({kind}: OutputImport): boolean => kind !== excludedKind;
+const isNotDynamicImport = isNotImportKind("dynamic-import");
+const importNotTraversed = (traversedImports: ReadonlyArray<string>) => ({path}: OutputImport): boolean => !traversedImports.includes(path);
+const importsInSubEntryPoint = (metaFileOutputs: MetafileOutputs, traversedImports: ReadonlyArray<string>) => (path: string) => importsInEntryPoint(path, metaFileOutputs, traversedImports.concat(path));
+
+export function importsInEntryPoint(entryPoint: string, metaFileOutputs: MetafileOutputs, traversedImports: ReadonlyArray<string> = [entryPoint]): ReadonlyArray<string> {
+  const staticImports = metaFileOutputs[entryPoint].imports.filter(isNotDynamicImport).filter(importNotTraversed(traversedImports)).map(({path}) => path);
+  return staticImports.length ? staticImports.flatMap(importsInSubEntryPoint(metaFileOutputs, traversedImports)) : traversedImports;
+}
+
+interface OutputSize {
+  readonly name: string;
+  readonly size: number;
+  readonly imports?: ReadonlyArray<string>;
+}
+
+const comparedBySize = (a: OutputSize, b: OutputSize) => b.size - a.size;
+const outputSizeMapFn = (name: string, size: number, imports: ReadonlyArray<string>): OutputSize => ({ name, size, imports })
+const emptyBalancedOutputSizes = (targetChunkCount: number): OutputSize[] => Array.from({ length: targetChunkCount }, (_, i) => outputSizeMapFn(i.toString(), 0, []));
+const indexOfSmallestOutput = (prev: number, curr: OutputSize, index: number, array: ReadonlyArray<OutputSize>): number => curr.size < array[prev].size ? index : prev;
+
+const hashFromOutputPaths = (paths: ReadonlyArray<string>) => createHash('sha256').update(paths.join('')).digest('hex').substring(0, 8).toUpperCase();
+
+const greedyBalanceOutputSize = (previousOutputs: ReadonlyArray<OutputSize>, currentOutput: OutputSize): OutputSize[] => {
+  const smallestBinIndex = previousOutputs.reduce<number>(indexOfSmallestOutput, 0);
+  return previousOutputs.map((output, index) => {
+    return index === smallestBinIndex
+      ? { name: output.name, size: output.size + currentOutput.size, imports: [...output.imports ?? [], currentOutput.name] }
+      : output
+  })
+}
+
+export function balanceOutputSizes(targetChunkCount: number, sizedChunks: ReadonlyArray<OutputSize>): OutputSize[] {
+  return sizedChunks
+    .toSorted(comparedBySize)
+    .reduce(greedyBalanceOutputSize, emptyBalancedOutputSizes(targetChunkCount))
+    .filter(({size}) => size !== 0)
+    .map((output: OutputSize) => ({ ...output, name: hashFromOutputPaths(output.imports!) }));
+}
+
+export function balanceMetaOutputs(targetChunkCount: number, entry: string, outputs: MetafileOutputs): Readonly<Record<string, string>> {
+  const imports = importsInEntryPoint(entry, outputs);
+  const outputEntries = Object.entries(outputs);
+
+  const initialOutputSizes = outputEntries.filter(([path]) => imports.includes(path)).map(([path, details]) => outputSizeMapFn(path, details.bytes, details.imports.map(({path}) => path)));
+
+  const balancedOutputs = balanceOutputSizes(targetChunkCount, initialOutputSizes);
+
+  return balancedOutputs.reduce((previousValue, currentValue) => {
+    const chunkMaps = currentValue.imports?.reduce((prev, curr) => {
+      return { ...prev, [curr]: currentValue.name }
+    }, {}) ;
+    return  { ...previousValue, ...chunkMaps };
+  }, {});
+}

packages/angular-rollup/src/executors/bundle/schema.d.ts

@@ -1,4 +1,5 @@
 export interface BundleExecutorSchema {
   main: string;
   outputPath: string;
-} // eslint-disable-line
+  maxChunks: number;
+}

packages/angular-rollup/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "commonjs"
+    "module": "commonjs",
+    "lib": ["esnext"]
   },
   "files": [],
   "include": [],

packages/portal-app/project.json

@@ -11,7 +11,8 @@
       "options": {
         "main": "{projectRoot}/src/main.ts",
         "index": "{projectRoot}/src/index.html",
-        "outputPath": "dist/{projectRoot}"
+        "outputPath": "dist/{projectRoot}",
+        "maxChunks": 4
       },
       "dependsOn": ["build"]
     },