perf(cargo): Try some config flags for perf (#4)

Co-authored-by: Goulven Clec'h <[email protected]>

.github/workflows/benchmark.yaml

@@ -7,6 +7,9 @@ on:
   pull_request:
   workflow_dispatch:
 
+env:
+  CODSPEED: true
+
 jobs:
   benchmarks:
     name: Run benchmarks
@@ -32,7 +35,7 @@ jobs:
           bins: cargo-codspeed, wasm-bindgen-cli, just, wasm-opt
 
       - name: Build (WASM)
-        run: just build-wasm release
+        run: just build-wasm benchmark
 
       - name: Build the benchmark target(s)
         run: cargo codspeed build

Cargo.toml

@@ -1,3 +1,12 @@
 [workspace]
 members = ["crates/*"]
 resolver = "2"
+
+[profile.release]
+opt-level = 3
+lto = "fat"
+codegen-units = 1
+
+[profile.benchmark]
+inherits = "release"
+debug = true

justfile

@@ -12,9 +12,9 @@ build mode=default_mode:
 build-wasm mode=default_mode:
 	just fetch-data
 	echo "Building to WASM target..."
-	cargo build --target wasm32-unknown-unknown {{ if mode == "release" {"--release"} else {""} }} --features wasm
+	cargo build --target wasm32-unknown-unknown {{ if mode == "release" {"--release"} else if mode == "benchmark" {"--profile benchmark"} else {""} }} --features wasm
 	wasm-bindgen ./target/wasm32-unknown-unknown/{{mode}}/csslsrs.wasm --out-dir ./packages/csslsrs/src/generated --target=experimental-nodejs-module
-	wasm-opt -O4 ./packages/csslsrs/src/generated/csslsrs_bg.wasm -o ./packages/csslsrs/src/generated/csslsrs_bg.wasm
+	{{ if mode == "release" { "wasm-opt -O4 ./packages/csslsrs/src/generated/csslsrs_bg.wasm -o ./packages/csslsrs/src/generated/csslsrs_bg.wasm" } else { "" } }}
 	pnpm -C ./packages/csslsrs install
 	pnpm -C ./packages/csslsrs run build
 

packages/benchmark-wasm/benchmarks/colors.ts → packages/benchmark-wasm/benchmarks/colors.bench.ts

@@ -1,9 +1,7 @@
-import { Bench } from "tinybench";
 import { get_color_presentations, get_document_colors } from "csslsrs";
-import { getCSSLanguageService, Range } from "vscode-css-languageservice";
+import { getCSSLanguageService } from "vscode-css-languageservice";
 import { TextDocument } from "vscode-languageserver-textdocument";
-
-const bench = new Bench({ name: "Colors", time: 100 });
+import { bench, describe } from "vitest";
 
 const vscodeLanguageService = getCSSLanguageService();
 const content = `
@@ -27,26 +25,25 @@ h2 {
 const textDocument = TextDocument.create("file:///test.css", "css", 0, content);
 const color = (await get_document_colors(textDocument))[0];
 
-export function registerColorBenchmarks(
-	bench: Bench,
-	onlyCSSLSRS: boolean
-): Bench {
-	bench
-		.add("CSSLSRS(WASM) - Document colors", async () => {
-			await get_document_colors(textDocument);
-		})
-		.add("CSSLSRS(WASM) - Color Presentations", async () => {
-			get_color_presentations(color, color.range);
+describe("Document colors", async () => {
+	bench("CSSLSRS(WASM) - Document colors", async () => {
+		await get_document_colors(textDocument);
+	});
+	if (!process.env.CODSPEED) {
+		bench("vscode-css-languageservice - Document colors", () => {
+			const stylesheet = vscodeLanguageService.parseStylesheet(textDocument);
+			vscodeLanguageService.findDocumentColors(textDocument, stylesheet);
 		});
+	}
+});
 
-	if (onlyCSSLSRS) return bench;
+describe("Color Presentations", async () => {
+	bench("CSSLSRS(WASM) - Color Presentations", () => {
+		get_color_presentations(color, color.range);
+	});
 
-	bench
-		.add("vscode-css-languageservice - Document colors", () => {
-			const stylesheet = vscodeLanguageService.parseStylesheet(textDocument);
-			vscodeLanguageService.findDocumentColors(textDocument, stylesheet);
-		})
-		.add("vscode-css-languageservice - Color Presentations", () => {
+	if (!process.env.CODSPEED) {
+		bench("vscode-css-languageservice - Color Presentations", () => {
 			const stylesheet = vscodeLanguageService.parseStylesheet(textDocument);
 			vscodeLanguageService.getColorPresentations(
 				textDocument,
@@ -55,8 +52,5 @@ export function registerColorBenchmarks(
 				color.range
 			);
 		});
-
-	return bench;
-}
-
-export default registerColorBenchmarks(bench, false);
+	}
+});

packages/benchmark-wasm/benchmarks/folding_ranges.ts → packages/benchmark-wasm/benchmarks/folding_ranges.bench.ts

@@ -1,9 +1,7 @@
-import { Bench } from "tinybench";
 import { get_folding_ranges } from "csslsrs";
 import { getCSSLanguageService } from "vscode-css-languageservice";
 import { TextDocument } from "vscode-languageserver-textdocument";
-
-const bench = new Bench({ name: "Folding Ranges", time: 100 });
+import { bench, describe } from "vitest";
 
 const vscodeLanguageService = getCSSLanguageService();
 const content = `
@@ -43,22 +41,14 @@ h4 {
 
 const textDocument = TextDocument.create("file:///test.css", "css", 0, content);
 
-export function registerFoldingRangesBenchmarks(
-	bench: Bench,
-	onlyCSSLSRS: boolean
-): Bench {
-	bench.add("CSSLSRS(WASM) - Folding Ranges", async () => {
+describe("Folding Ranges", async () => {
+	bench("CSSLSRS(WASM) - Folding Ranges", async () => {
 		await get_folding_ranges(textDocument);
 	});
-
-	if (onlyCSSLSRS) return bench;
-
-	bench.add("vscode-css-languageservice - Folding Ranges", () => {
-		const stylesheet = vscodeLanguageService.parseStylesheet(textDocument);
-		vscodeLanguageService.getFoldingRanges(textDocument, stylesheet);
-	});
-
-	return bench;
-}
-
-export default registerFoldingRangesBenchmarks(bench, false);
+	if (!process.env.CODSPEED) {
+		bench("vscode-css-languageservice - Folding Ranges", () => {
+			const stylesheet = vscodeLanguageService.parseStylesheet(textDocument);
+			vscodeLanguageService.getFoldingRanges(textDocument, stylesheet);
+		});
+	}
+});

packages/benchmark-wasm/benchmarks/hover.bench.ts

@@ -0,0 +1,47 @@
+import { get_hover } from "../../csslsrs/dist/generated/csslsrs";
+import { getCSSLanguageService } from "vscode-css-languageservice";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import cssCustomData from "../../../crates/csslsrs/data/css-schema.json";
+import { bench, describe } from "vitest";
+
+describe("Hover", async () => {
+	const vscodeLanguageService = getCSSLanguageService();
+	const content = `
+body {
+  background-color: #fff;
+}
+
+a {
+  color: red;
+}
+
+h1.foo {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+h1 > span {
+  color: linear-gradient(to right, red, #fff);
+}
+`;
+
+	const textDocument = TextDocument.create(
+		"file:///test.css",
+		"css",
+		0,
+		content
+	);
+
+	bench("CSSLSRS(WASM) - Hover", async () => {
+		await get_hover(textDocument, { line: 4, character: 3 }, cssCustomData);
+	});
+	if (!process.env.CODSPEED) {
+		bench("vscode-css-languageservice - Hover", () => {
+			const stylesheet = vscodeLanguageService.parseStylesheet(textDocument);
+			vscodeLanguageService.doHover(
+				textDocument,
+				{ line: 4, character: 3 },
+				stylesheet
+			);
+		});
+	}
+});

packages/benchmark-wasm/package.json

@@ -6,18 +6,19 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "benchmark": "tsx index.ts",
-    "benchmark-codspeed": "tsx codspeed.ts"
+    "benchmark": "pnpm exec vitest bench",
+		"benchmark-codspeed": "CODSPEED=true pnpm exec vitest bench"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@codspeed/tinybench-plugin": "^3.1.1",
     "csslsrs": "workspace:*",
-    "tinybench": "^3.0.3",
-    "tsx": "^4.19.1",
     "vscode-css-languageservice": "^6.3.1",
     "vscode-languageserver-textdocument": "^1.0.12"
+  },
+  "dependencies": {
+    "@codspeed/vitest-plugin": "^3.1.1",
+    "vitest": "^2.1.8"
   }
 }

packages/benchmark-wasm/vitest.config.ts

@@ -0,0 +1,8 @@
+import codspeedPlugin from "@codspeed/vitest-plugin";
+import { defineConfig } from "vitest/config";
+
+const plugins = process.env.CODSPEED ? [codspeedPlugin()] : [];
+
+export default defineConfig({
+	plugins,
+});