chore(dev): tweak frontend-js-size

.github/scripts/frontend-js-size.mjs

@@ -530,12 +530,61 @@ function renderFrontendBundleReport(before, after) {
 	return lines.join('\n');
 }
 
+const visualizerTreemapLimit = 20;
+
+function mermaidTreemapLabel(value) {
+	const label = String(value)
+		.replaceAll('\\', '/')
+		.replaceAll('"', "'")
+		.replaceAll('`', "'")
+		.replaceAll('\r', ' ')
+		.replaceAll('\n', ' ')
+		.trim();
+	return label === '' ? '(unknown)' : label;
+}
+
+function renderVisualizerTreemap(label, report) {
+	const rows = report.hotModules
+		.filter((row) => row.renderedLength > 0)
+		.slice(0, visualizerTreemapLimit);
+	const topRendered = rows.reduce((sum, row) => sum + row.renderedLength, 0);
+	const otherRendered = Math.max(0, report.metrics.renderedLength - topRendered);
+	const lines = [
+		'```mermaid',
+		'treemap-beta',
+		`"${mermaidTreemapLabel(label)}"`,
+	];
+
+	for (const row of rows) {
+		lines.push(`  "${mermaidTreemapLabel(row.id)}": ${Math.round(row.renderedLength)}`);
+	}
+	if (otherRendered > 0) {
+		lines.push(`  "Other": ${Math.round(otherRendered)}`);
+	}
+
+	lines.push('```');
+	return lines.join('\n');
+}
+
+function renderVisualizerTreemapDetails(label, report, open = false) {
+	return [
+		`<details${open ? ' open' : ''}>`,
+		`<summary>${label} rendered size treemap (top ${visualizerTreemapLimit} + Other)</summary>`,
+		'',
+		renderVisualizerTreemap(label, report),
+		'',
+		'</details>',
+	].join('\n');
+}
+
 const args = process.argv.slice(2);
 const [beforeDir, afterDir, beforeStatsFile, afterStatsFile, outFile] = args;
 const before = await collectReport(beforeDir);
 const after = await collectReport(afterDir);
 const beforeStats = JSON.parse(await fs.readFile(beforeStatsFile, 'utf8'));
 const afterStats = JSON.parse(await fs.readFile(afterStatsFile, 'utf8'));
+const beforeVisualizerReport = collectVisualizerReport(beforeStats);
+const afterVisualizerReport = collectVisualizerReport(afterStats);
 const visualizerArtifactLink = `[Download detailed HTML](${process.env.FRONTEND_BUNDLE_REPORT_ARTIFACT_URL})`;
 
 const body = [
@@ -547,7 +596,11 @@ const body = [
 	'',
 	'## Bundle Stats',
 	'',
-	renderFrontendBundleReport(collectVisualizerReport(beforeStats), collectVisualizerReport(afterStats)),
+	renderFrontendBundleReport(beforeVisualizerReport, afterVisualizerReport),
+	'',
+	renderVisualizerTreemapDetails('Before', beforeVisualizerReport),
+	'',
+	renderVisualizerTreemapDetails('After', afterVisualizerReport, true),
 	'',
 	visualizerArtifactLink,
 ].join('\n');