feat(core): add cache hits info to benchmark (#3)

* feat(core): add cache hits info to benchmark * feat(core): add cache hits info to benchmark
web-infra-dev · Sep 7, 2023 · a2cfe22 · a2cfe22
1 parent ac3c3b7
commit a2cfe22
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 17 deletions.
diff --git a/docs/index.js b/docs/index.js
@@ -13,6 +13,9 @@ const formatSize = (value, maxValue) => {
 	if (maxValue > 10000) return `${value / 1000} kB`;
 	return `${value} B`;
 };
+const formatRatio = (value, maxValue) => {
+	return `${value}%`;
+};
 const debounce = (fn, t) => {
 	let timer = null;
 	return function (...args) {
@@ -22,6 +25,15 @@ const debounce = (fn, t) => {
 		timer = setTimeout(() => fn(...args), t);
 	};
 };
+const getAxisType = (tag) => {
+	if (tag.endsWith(" size") || tag.endsWith(" memory")) {
+		return "size";
+	} else if (tag.endsWith(" cache")) {
+		return "ratio";
+	} else {
+		return "time";
+	}
+};
 
 class DataCenter {
 	constructor() {
@@ -240,6 +252,17 @@ class BenchmarkChart {
 								return formatSize(value, values[values.length - 1].value);
 							}
 						}
+					},
+					ratio: {
+						type: "linear",
+						display: false,
+						position: "right",
+						beginAtZero: true,
+						ticks: {
+							callback(value, _, values) {
+								return formatRatio(value, values[values.length - 1].value);
+							}
+						}
 					}
 				},
 				plugins: {
@@ -257,7 +280,9 @@ class BenchmarkChart {
 								const text =
 									context.dataset.yAxisID === "size"
 										? formatSize(value, value)
-										: formatTime(value, value);
+										: context.dataset.yAxisID === "ratio"
+											? formatRatio(value, value)
+											: formatTime(value, value);
 								return `${context.dataset.label}: ${text}`;
 							}
 						}
@@ -274,15 +299,14 @@ class BenchmarkChart {
 	updateChartData(data) {
 		let showTimeAxis = false;
 		let showSizeAxis = false;
+		let showRatioAxis = false;
 		const datasets = [];
 		for (const tag of Object.keys(data)) {
 			const values = data[tag];
-			const isSizeAxis = tag.endsWith(" size") || tag.endsWith(" memory");
-			if (isSizeAxis) {
-				showSizeAxis = true;
-			} else {
-				showTimeAxis = true;
-			}
+			const axis = getAxisType(tag);
+			showTimeAxis = showTimeAxis || axis === "time";
+			showSizeAxis = showSizeAxis || axis === "size";
+			showRatioAxis = showRatioAxis || axis === "ratio";
 			datasets.push({
 				label: tag,
 				data: values.map(({ date, value }) => {
@@ -291,13 +315,14 @@ class BenchmarkChart {
 						y: value
 					};
 				}),
-				yAxisID: isSizeAxis ? "size" : "time",
+				yAxisID: axis,
 				fill: true
 			});
 		}
 		this.chart.data.datasets = datasets;
 		this.chart.options.scales.time.display = showTimeAxis;
 		this.chart.options.scales.size.display = showSizeAxis;
+		this.chart.options.scales.ratio.display = showRatioAxis;
 		this.chart.update();
 	}
 

diff --git a/lib/display.js b/lib/display.js
@@ -9,8 +9,12 @@ const typeOrder = {
 const f = (name, value) => {
 	if (name.endsWith(" size")) return bytes(value);
 	if (name.endsWith(" memory")) return bytes(value);
+	if (name.endsWith(" cache")) return ratio(value);
 	return ms(value);
 };
+const ratio = value => {
+	return `${Number(value).toFixed(2)}%`;
+};
 const bytes = value => {
 	if (value === 0) return `-`;
 	if (value > 1024 * 102400) return `${Math.round(value / 1024 / 1024)} MiB`;

diff --git a/lib/scenarios/build-plugin.cjs b/lib/scenarios/build-plugin.cjs
@@ -41,13 +41,22 @@ module.exports = class BuildPlugin {
 				const { entries } = logging[_name];
 				const name = _name.replace(/^rspack\./, "");
 				for (const { type, args, message } of entries) {
-					if (type !== "time") continue;
-					if (args) {
-						const ms = args[1] * 1000 + args[2] / 1000000;
-						console.log(`#!# ${name}.${args[0]} = ${ms}`);
-					} else {
-						const [, label, msStr] = /^(.+): ([\d.]+) ms$/.exec(message);
-						console.log(`#!# ${name}.${label} = ${msStr}`);
+					if (type === "time") {
+						if (args) {
+							const ms = args[1] * 1000 + args[2] / 1000000;
+							console.log(`#!# ${name}.${args[0]} = ${ms}`);
+						} else {
+							const [, label, msStr] = /^(.+): ([\d.]+) ms$/.exec(message);
+							console.log(`#!# ${name}.${label} = ${msStr}`);
+						}
+					} else if (type === "cache") {
+						if (args) {
+							const ratio = args[1] / args[2] * 100;
+							console.log(`#!# ${name}.${args[0]} = ${ratio}`);
+						} else {
+							const [, label, ratio] = /^(.+): ([\d.]+)% \(([\d.\/]+)\/([\d.\/]+)\)$/.exec(message);
+							console.log(`#!# ${name}.${label} = ${ratio}`);
+						}
 					}
 				}
 			}

diff --git a/lib/scenarios/utils.js b/lib/scenarios/utils.js
@@ -23,9 +23,9 @@ export async function clearCaches(directory) {
 
 export async function getDirSizes(directory) {
 	let size = 0;
-	await runCommand("du", ["-sb", directory], {
+	await runCommand("du", ["-s", directory], {
 		onData(item) {
-			size = parseInt(item.toString());
+			size = parseInt(item.toString()) * 1024;
 		}
 	});
 	return size;

diff --git a/lib/utils.js b/lib/utils.js
@@ -36,6 +36,7 @@ export async function runCommand(
 export function getType(metric) {
 	if (metric.endsWith(" memory")) return "memory";
 	if (metric.endsWith(" size")) return "size";
+	if (metric.endsWith(" cache")) return "ratio";
 	return "time";
 }