Add benchmarks

Author: simonwep

README.md

@@ -5,7 +5,7 @@
 </h3>
 
 <h6 align="center">
-    <p><a href="#how-does-it-work">Mangle classnames in production</a> - save up to 20% on css for free!</p>
+    <p><a href="#how-does-it-work">Mangle classnames in production</a> - save up to 30% on css and 90% of build time for free!</p>
 </h6>
 
 <p align="center">
@@ -46,6 +46,20 @@ export default defineConfig({
 
 And that's it. When running `vite build` your generated CSS should be significantly smaller.
 
+### Benchmarks
+
+Benchmarks are done against [bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/) and [materialize.css](https://materializecss.com/getting-started.html) assuming all the classes are used as css modules.
+The benchmark code is located in the [benchmarks](./benchmarks) directory.
+
+Run them by building the plugin via `npm run build` and then running `npm run benchmarks`.
+The results below are from a MacBook Air M2 with node v22.8.0.
+
+| Input                                                                            | Build Time                            | Gzip Size                                | Brotli Size                             |
+|----------------------------------------------------------------------------------|---------------------------------------|------------------------------------------|-----------------------------------------|
+| [bootstrap-5.0.2.module.css](benchmarks/fixtures/bootstrap-5.0.2.module.css)     | 525ms (_**-94.06%**_ / _**-8311ms**_) | 21.3 kB (_**-26.53%**_ / _**-7.69 kB**_) | 21.3 kB (_**-27.54%**_ / _**-6 kB**_)   |
+| [materialize-1.0.0.module.css](benchmarks/fixtures/materialize-1.0.0.module.css) | 572ms (_**-92.59%**_ / _**-7156ms**_) | 20.1 kB (_**-19.70%**_ / _**-4.93 kB**_) | 20.1 kB (_**-21.33%**_ / _**-4.3 kB**_) |
+
+
 ### How does it work?
 
 By default, when using css modules, you end up with hashes or other long class-names in your bundled css files:

benchmarks/bundler.mjs

@@ -0,0 +1,60 @@
+import {isMainThread, parentPort, workerData} from 'node:worker_threads';
+import {join} from 'node:path';
+import {mkdir, writeFile, stat} from 'node:fs/promises'
+import {build} from 'vite'
+import {gzipSize} from 'gzip-size';
+import * as brotliSize from 'brotli-size';
+import {randomUUID} from 'node:crypto';
+import {optimizeCssModules} from '../dist/index.mjs';
+
+if (isMainThread) {
+  throw new Error('This module must be run as a worker.');
+}
+
+const benchmark = join(process.cwd(), 'benchmarks');
+const output = join(benchmark, '.output', randomUUID());
+
+// Clean and re-create output directory
+await mkdir(output).catch(() => 0);
+
+const sizeFor = async (string) => ({
+  gzip: await gzipSize(string),
+  brotli: brotliSize.sync(string),
+});
+
+const {input, optimize = false} = workerData;
+const root = join(output, `${input}.html`);
+const module = join(output, `${input}.ts`);
+const css = join(benchmark, 'fixtures', input);
+
+await writeFile(root, `<script type="module" src="${module}"></script>`)
+await writeFile(module, `import styles from '${css}'; console.log(Object.entries(styles));`)
+
+const start = process.hrtime.bigint();
+const result = await build({
+  plugins: optimize ? [optimizeCssModules()] : [],
+  build: {
+    outDir: output,
+    rollupOptions: {
+      input: {
+        app: root
+      }
+    }
+  }
+});
+
+const builtTime = process.hrtime.bigint() - start;
+const minifiedCssFile = result.output.find(v => v.fileName.endsWith('.css')).source;
+const sizes = await sizeFor(minifiedCssFile);
+
+parentPort.postMessage({
+  input,
+  builtTime: Number(builtTime),
+  optimized: optimize,
+  sizes: {
+    ...sizes,
+    original: (await stat(css)).size
+  }
+});
+
+