test: improve benchmarks

Author: danielroe

benchmark/renderer.bench.ts

@@ -0,0 +1,108 @@
+import { bench, describe } from 'vitest'
+import { createRenderer, renderStyles, renderScripts, renderResourceHints } from '../src/runtime'
+import { normalizeViteManifest, normalizeWebpackManifest } from '../src'
+
+import viteManifest from '../test/fixtures/vite-manifest.json'
+import webpackManifest from '../test/fixtures/webpack-manifest.json'
+import largeViteManifest from './fixtures/large-vite-manifest.json'
+
+describe('createRenderer', () => {
+  bench('vite', () => {
+    createRenderer(() => ({}), {
+      manifest: normalizeViteManifest(viteManifest),
+      renderToString: () => '<div>test</div>',
+    })
+  })
+
+  bench('webpack', () => {
+    createRenderer(() => ({}), {
+      manifest: normalizeWebpackManifest(webpackManifest),
+      renderToString: () => '<div>test</div>',
+    })
+  })
+
+  bench('vite (large)', () => {
+    createRenderer(() => ({}), {
+      manifest: normalizeViteManifest(largeViteManifest),
+      renderToString: () => '<div>test</div>',
+    })
+  })
+})
+
+describe('rendering', () => {
+  const viteRenderer = createRenderer(() => ({}), {
+    manifest: normalizeViteManifest(viteManifest),
+    renderToString: () => '<div>test</div>',
+  })
+
+  const webpackRenderer = createRenderer(() => ({}), {
+    manifest: normalizeWebpackManifest(webpackManifest),
+    renderToString: () => '<div>test</div>',
+  })
+
+  const largeViteRenderer = createRenderer(() => ({}), {
+    manifest: normalizeViteManifest(largeViteManifest),
+    renderToString: () => '<div>test</div>',
+  })
+
+  // Get actual module keys from manifests
+  const viteModules = Object.keys(viteManifest)
+  const webpackModules = Object.keys(webpackManifest)
+  const largeViteModules = Object.keys(largeViteManifest)
+
+  // Small module sets
+  const smallViteSet = new Set(viteModules.slice(0, 2))
+  const smallWebpackSet = new Set(webpackModules.slice(0, 2))
+
+  // Large module sets
+  const largeViteSet = new Set(viteModules)
+  const largeLargeViteSet = new Set(largeViteModules.slice(0, 50))
+
+  bench('renderStyles - vite (small)', () => {
+    renderStyles({ modules: smallViteSet }, viteRenderer.rendererContext)
+  })
+
+  bench('renderStyles - vite (large)', () => {
+    renderStyles({ modules: largeViteSet }, viteRenderer.rendererContext)
+  })
+
+  bench('renderStyles - vite (very large)', () => {
+    renderStyles({ modules: largeLargeViteSet }, largeViteRenderer.rendererContext)
+  })
+
+  bench('renderScripts - vite (small)', () => {
+    renderScripts({ modules: smallViteSet }, viteRenderer.rendererContext)
+  })
+
+  bench('renderScripts - vite (large)', () => {
+    renderScripts({ modules: largeViteSet }, viteRenderer.rendererContext)
+  })
+
+  bench('renderScripts - vite (very large)', () => {
+    renderScripts({ modules: largeLargeViteSet }, largeViteRenderer.rendererContext)
+  })
+
+  bench('renderResourceHints - vite (small)', () => {
+    renderResourceHints({ modules: smallViteSet }, viteRenderer.rendererContext)
+  })
+
+  bench('renderResourceHints - vite (large)', () => {
+    renderResourceHints({ modules: largeViteSet }, viteRenderer.rendererContext)
+  })
+
+  bench('renderResourceHints - vite (very large)', () => {
+    renderResourceHints({ modules: largeLargeViteSet }, largeViteRenderer.rendererContext)
+  })
+
+  bench('renderStyles - webpack', () => {
+    renderStyles({ modules: smallWebpackSet }, webpackRenderer.rendererContext)
+  })
+
+  bench('renderScripts - webpack', () => {
+    renderScripts({ modules: smallWebpackSet }, webpackRenderer.rendererContext)
+  })
+
+  bench('renderResourceHints - webpack', () => {
+    renderResourceHints({ modules: smallWebpackSet }, webpackRenderer.rendererContext)
+  })
+})

benchmark/utils.bench.ts

@@ -31,7 +31,7 @@ const assetFiles = [
 
 const mixedFiles = [...jsFiles, ...cssFiles, ...assetFiles]
 
-describe('File Type Detection Benchmarks', () => {
+describe('file type detection', () => {
   bench('isJS detection on JS files', () => {
     for (const file of jsFiles) {
       isJS(file)
@@ -57,7 +57,7 @@ describe('File Type Detection Benchmarks', () => {
   })
 })
 
-describe('Asset Type Detection Benchmarks', () => {
+describe('asset type detection', () => {
   bench('getAsType on mixed files', () => {
     for (const file of mixedFiles) {
       const base = file.split('?', 1)[0]
@@ -81,7 +81,7 @@ describe('Asset Type Detection Benchmarks', () => {
   })
 })
 
-describe('Resource Parsing Benchmarks', () => {
+describe('resource parsing', () => {
   bench('parseResource on JS files', () => {
     for (const file of jsFiles) {
       parseResource(file)
@@ -116,7 +116,7 @@ describe('Resource Parsing Benchmarks', () => {
 })
 
 // Test with dynamically generated file names
-describe('Dynamic File Generation Benchmarks', () => {
+describe('dynamic file generation', () => {
   bench('parseResource on generated JS files', () => {
     for (let i = 0; i < 100; i++) {
       parseResource(`chunk-${i}.js`)

benchmark/vite.bench.ts

@@ -1,24 +1,16 @@
-import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
 import { bench, describe } from 'vitest'
 import { normalizeViteManifest } from '../src/vite'
 import type { Manifest as ViteManifest } from 'vite'
 
-// Load test fixtures
-const smallViteManifest = JSON.parse(
-  readFileSync(resolve(__dirname, '../test/fixtures/vite-manifest.json'), 'utf-8'),
-) as ViteManifest
+import smallViteManifest from '../test/fixtures/vite-manifest.json'
+import largeViteManifest from './fixtures/large-vite-manifest.json'
 
-const largeViteManifest = JSON.parse(
-  readFileSync(resolve(__dirname, 'fixtures/large-vite-manifest.json'), 'utf-8'),
-) as ViteManifest
-
-describe('Vite Manifest Normalization Benchmarks', () => {
-  bench('normalize small Vite manifest', () => {
+describe('normalizeViteManifest', () => {
+  bench('small', () => {
     normalizeViteManifest(smallViteManifest)
   })
 
-  bench('normalize large Vite manifest', () => {
+  bench('large', () => {
     normalizeViteManifest(largeViteManifest)
   })
 
@@ -70,14 +62,12 @@ describe('Vite Manifest Normalization Benchmarks', () => {
 
   const complexViteManifest = createComplexViteManifest()
 
-  bench('normalize complex nested Vite manifest', () => {
+  bench('complex', () => {
     normalizeViteManifest(complexViteManifest)
   })
 })
 
-// Benchmark with different manifest sizes
-describe('Vite Manifest Size Scaling', () => {
-  // Generate manifests of different sizes
+describe('normalizeViteManifest scaling', () => {
   const generateManifest = (entryCount: number): ViteManifest => {
     const manifest: ViteManifest = {}
 
@@ -110,22 +100,22 @@ describe('Vite Manifest Size Scaling', () => {
   }
 
   const manifest5 = generateManifest(5)
-  bench('normalize 5 entries', () => {
+  bench('5 entries', () => {
     normalizeViteManifest(manifest5)
   })
 
   const manifest25 = generateManifest(25)
-  bench('normalize 25 entries', () => {
+  bench('25 entries', () => {
     normalizeViteManifest(manifest25)
   })
 
   const manifest50 = generateManifest(50)
-  bench('normalize 50 entries', () => {
+  bench('50 entries', () => {
     normalizeViteManifest(manifest50)
   })
 
   const manifest100 = generateManifest(100)
-  bench('normalize 100 entries', () => {
+  bench('100 entries', () => {
     normalizeViteManifest(manifest100)
   })
 })

benchmark/webpack.bench.ts

@@ -1,41 +1,21 @@
-import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
 import { bench, describe } from 'vitest'
 import { normalizeWebpackManifest, type WebpackClientManifest } from '../src/webpack'
 
-// Load test fixtures
-const smallWebpackManifest = JSON.parse(
-  readFileSync(resolve(__dirname, '../test/fixtures/webpack-manifest.json'), 'utf-8'),
-) as WebpackClientManifest
+import smallWebpackManifest from '../test/fixtures/webpack-manifest.json'
+import largeWebpackManifest from './fixtures/large-webpack-manifest.json'
 
-const largeWebpackManifest = JSON.parse(
-  readFileSync(resolve(__dirname, 'fixtures/large-webpack-manifest.json'), 'utf-8'),
-) as WebpackClientManifest
-
-describe('Webpack Manifest Normalization Benchmarks', () => {
-  bench('normalize small Webpack manifest', () => {
+describe('normalizeWebpackManifest', () => {
+  bench('small', () => {
     normalizeWebpackManifest(smallWebpackManifest)
   })
 
-  bench('normalize large Webpack manifest', () => {
+  bench('large', () => {
     normalizeWebpackManifest(largeWebpackManifest)
   })
-
-  bench('normalize small Webpack manifest (100 iterations)', () => {
-    for (let i = 0; i < 100; i++) {
-      normalizeWebpackManifest(smallWebpackManifest)
-    }
-  })
-
-  bench('normalize large Webpack manifest (10 iterations)', () => {
-    for (let i = 0; i < 10; i++) {
-      normalizeWebpackManifest(largeWebpackManifest)
-    }
-  })
 })
 
 // Benchmark with different manifest sizes
-describe('Webpack Manifest Size Scaling', () => {
+describe('normalizeWebpackManifest scaling', () => {
   // Generate manifests of different sizes
   const generateManifest = (entryCount: number): WebpackClientManifest => {
     const all: string[] = ['runtime.js', 'commons/app.js', 'app.css', 'app.js']
@@ -65,22 +45,22 @@ describe('Webpack Manifest Size Scaling', () => {
   }
 
   const manifest5 = generateManifest(5)
-  bench('normalize 5 entries', () => {
+  bench('5 entries', () => {
     normalizeWebpackManifest(manifest5)
   })
 
   const manifest25 = generateManifest(25)
-  bench('normalize 25 entries', () => {
+  bench('25 entries', () => {
     normalizeWebpackManifest(manifest25)
   })
 
   const manifest50 = generateManifest(50)
-  bench('normalize 50 entries', () => {
+  bench('50 entries', () => {
     normalizeWebpackManifest(manifest50)
   })
 
   const manifest100 = generateManifest(100)
-  bench('normalize 100 entries', () => {
+  bench('100 entries', () => {
     normalizeWebpackManifest(manifest100)
   })
 })