Make N configurable

README.md

@@ -79,6 +79,7 @@ permissions:
 | `include_extensions`      | `.js,.cjs,.mjs`                       | A comma-separated list of file extension to be included in the analysis table.                                   |
 | `percent_extra_attention` | `20`                                  | If an out file size has increased more than this percent, display a "‼️" to draw extra attention to the change.  |
 | `show_details`            | `true`                                | If `true`, a collapsed "details" section is rendered. It explains the details of the numbers provided and icons. |
+| `top_n_largest_paths`     | `20`                                  | The number of largest paths (e.g.) `node_modules/foo`) to be collected. If 0 or lower, skipped.                  |
 
 ## Action outputs
 

action.yaml

@@ -52,6 +52,12 @@ inputs:
     default: "true"
     description: |
       If `true`, a collapsed "details" section is rendered. It explains the details of the numbers provided and icons.
+  top_n_largest_paths:
+    required: false
+    default: "20"
+    description: |
+      The number of largest paths (e.g.) `node_modules/foo`) to be collected.
+      If 0 or lower, skipped.   
 
 runs:
   using: composite
@@ -75,6 +81,7 @@ runs:
         INPUT_INCLUDE_EXTENSIONS: ${{ inputs.include_extensions }}
         INPUT_PERCENT_EXTRA_ATTENTION: ${{ inputs.percent_extra_attention }}
         INPUT_SHOW_DETAILS: ${{ inputs.show_details }}
+        INPUT_TOP_N_LARGEST_PATHS: ${{ inputs.top_n_largest_paths }}
       run: |
         node ${{ github.action_path }}/dist/index.mjs
 

src/compare.ts

@@ -52,7 +52,7 @@ This analysis was generated by [esbuild-bundle-analyzer](https://github.com/exoe
 
 	if (hasAnyChange) {
 		output += markdownTable(comparison, input.percentExtraAttention);
-		output += fileSizeTable(comparison);
+		output += fileSizeTable(comparison, input.topNLargestPaths);
 		output += detail(input);
 	} else {
 		output += "This PR introduced no changes to the esbuild bundle! 🙌";
@@ -156,6 +156,10 @@ function buildFileTree(input: Options) {
 	}
 
 	const trees = new Map<string, TreeMapNode>();
+	if (input.topNLargestPaths <= 0) {
+		// Skip building tree if we don't need it.
+		return trees;
+	}
 	for (const metafile of input.metafiles) {
 		const metafileJson = loadMetaFile(path.join(process.cwd(), metafile));
 		for (const [outfile, buildMeta] of Object.entries(metafileJson.outputs)) {
@@ -210,10 +214,10 @@ ${rows}`;
 }
 
 /**
- * Find the top ten largest nodes in root tree.
+ * Find the top N largest nodes in root tree.
  * Dig nodes until the depth of 3.
  */
-function findLargeDirectories(root: TreeMapNode) {
+function findLargeDirectories(root: TreeMapNode, N: number) {
 	const nodes: TreeMapNode[] = [];
 	const queue: Array<{ node: TreeMapNode; depth: number }> = [
 		{ node: root, depth: 0 },
@@ -236,24 +240,28 @@ function findLargeDirectories(root: TreeMapNode) {
 			}
 		}
 	}
-	const largeNodes = nodes.sort((a, b) => b.value - a.value).slice(0, 10);
+	const largeNodes = nodes.sort((a, b) => b.value - a.value).slice(0, N);
 	return {
 		largeNodes,
-		hasOther: nodes.length > 10,
+		hasOther: nodes.length > N,
 	};
 }
 
 function fixedPercent(n: number, d: number): number {
 	return Number.parseFloat(((n / d) * 100).toFixed(1));
 }
 
-function fileSizeTable(data: Array<CompareResult>): string {
-	if (data.length === 0) {
+function fileSizeTable(
+	data: Array<CompareResult>,
+	topNLargestPaths: number,
+): string {
+	if (data.length === 0 || topNLargestPaths <= 0) {
 		return "";
 	}
 	let output = "";
 	output += "<details>\n";
 	output += "<summary>Top ten largest paths</summary>\n";
+	output += `These visualization shows top ${topNLargestPaths} largest paths in the bundle.\n`;
 	for (const d of data) {
 		output += "\n";
 		output += `## Meta file: ${d.metafile}, Out file: ${d.outfile}\n`;
@@ -264,7 +272,10 @@ function fileSizeTable(data: Array<CompareResult>): string {
 		output += "| Path | Size |\n";
 		output += "|------|-------|\n";
 		const totalSize = d.tree.value;
-		const { largeNodes, hasOther } = findLargeDirectories(d.tree);
+		const { largeNodes, hasOther } = findLargeDirectories(
+			d.tree,
+			topNLargestPaths,
+		);
 		for (const { path, value } of largeNodes) {
 			const percent = fixedPercent(value, totalSize);
 			output += `| ${path} | ${renderBar(percent, value)} |\n`;

src/index.ts

@@ -21,6 +21,10 @@ function getOptions(): Options {
 		showDetails: ["true", "True", "TRUE"].includes(
 			getInput("show_details") || "true",
 		),
+		topNLargestPaths: Number.parseInt(
+			getInput("top_n_largest_paths") || "20",
+			10,
+		),
 		includeExtensions: (
 			getInput("include_extensions") || ".js,.mjs,.cjs"
 		).split(","),

src/types.ts

@@ -18,6 +18,7 @@ export interface Options {
 	name: string;
 	metafiles: Array<string>;
 	includeExtensions: Array<string>;
+	topNLargestPaths: number;
 	analyzerDirectory: string;
 	percentExtraAttention: number;
 	showDetails: boolean;