perf: allow precomputing dependency graph

Author: danielroe

benchmark/renderer.bench.ts

@@ -1,35 +1,68 @@
 import { bench, describe } from 'vitest'
 import { createRenderer, renderStyles, renderScripts, renderResourceHints } from '../src/runtime'
 import { normalizeViteManifest, normalizeWebpackManifest } from '../src'
+import { precomputeDependencies } from '../src/precompute'
 
 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', () => {
+  // Precompute dependencies for benchmarks
+  const vitePrecomputed = precomputeDependencies(normalizeViteManifest(viteManifest))
+  const webpackPrecomputed = precomputeDependencies(normalizeWebpackManifest(webpackManifest))
+  const largeVitePrecomputed = precomputeDependencies(normalizeViteManifest(largeViteManifest))
+
+  bench('vite (manifest)', () => {
     createRenderer(() => ({}), {
       manifest: normalizeViteManifest(viteManifest),
       renderToString: () => '<div>test</div>',
     })
   })
 
-  bench('webpack', () => {
+  bench('vite (precomputed)', () => {
+    createRenderer(() => ({}), {
+      precomputed: vitePrecomputed,
+      renderToString: () => '<div>test</div>',
+    })
+  })
+
+  bench('webpack (manifest)', () => {
     createRenderer(() => ({}), {
       manifest: normalizeWebpackManifest(webpackManifest),
       renderToString: () => '<div>test</div>',
     })
   })
 
-  bench('vite (large)', () => {
+  bench('webpack (precomputed)', () => {
+    createRenderer(() => ({}), {
+      precomputed: webpackPrecomputed,
+      renderToString: () => '<div>test</div>',
+    })
+  })
+
+  bench('vite large (manifest)', () => {
     createRenderer(() => ({}), {
       manifest: normalizeViteManifest(largeViteManifest),
       renderToString: () => '<div>test</div>',
     })
   })
+
+  bench('vite large (precomputed)', () => {
+    createRenderer(() => ({}), {
+      precomputed: largeVitePrecomputed,
+      renderToString: () => '<div>test</div>',
+    })
+  })
 })
 
 describe('rendering', () => {
+  // Precompute dependencies
+  const vitePrecomputed = precomputeDependencies(normalizeViteManifest(viteManifest))
+  const webpackPrecomputed = precomputeDependencies(normalizeWebpackManifest(webpackManifest))
+  const largeVitePrecomputed = precomputeDependencies(normalizeViteManifest(largeViteManifest))
+
+  // Legacy renderers (with manifest)
   const viteRenderer = createRenderer(() => ({}), {
     manifest: normalizeViteManifest(viteManifest),
     renderToString: () => '<div>test</div>',
@@ -45,6 +78,22 @@ describe('rendering', () => {
     renderToString: () => '<div>test</div>',
   })
 
+  // Precomputed renderers
+  const vitePrecomputedRenderer = createRenderer(() => ({}), {
+    precomputed: vitePrecomputed,
+    renderToString: () => '<div>test</div>',
+  })
+
+  const webpackPrecomputedRenderer = createRenderer(() => ({}), {
+    precomputed: webpackPrecomputed,
+    renderToString: () => '<div>test</div>',
+  })
+
+  const largeVitePrecomputedRenderer = createRenderer(() => ({}), {
+    precomputed: largeVitePrecomputed,
+    renderToString: () => '<div>test</div>',
+  })
+
   // Get actual module keys from manifests
   const viteModules = Object.keys(viteManifest)
   const webpackModules = Object.keys(webpackManifest)
@@ -58,51 +107,99 @@ describe('rendering', () => {
   const largeViteSet = new Set(viteModules)
   const largeLargeViteSet = new Set(largeViteModules.slice(0, 50))
 
-  bench('renderStyles - vite (small)', () => {
+  bench('renderStyles - vite small (manifest)', () => {
     renderStyles({ modules: smallViteSet }, viteRenderer.rendererContext)
   })
 
-  bench('renderStyles - vite (large)', () => {
+  bench('renderStyles - vite small (precomputed)', () => {
+    renderStyles({ modules: smallViteSet }, vitePrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderStyles - vite large (manifest)', () => {
     renderStyles({ modules: largeViteSet }, viteRenderer.rendererContext)
   })
 
-  bench('renderStyles - vite (very large)', () => {
+  bench('renderStyles - vite large (precomputed)', () => {
+    renderStyles({ modules: largeViteSet }, vitePrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderStyles - vite very large (manifest)', () => {
     renderStyles({ modules: largeLargeViteSet }, largeViteRenderer.rendererContext)
   })
 
-  bench('renderScripts - vite (small)', () => {
+  bench('renderStyles - vite very large (precomputed)', () => {
+    renderStyles({ modules: largeLargeViteSet }, largeVitePrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderScripts - vite small (manifest)', () => {
     renderScripts({ modules: smallViteSet }, viteRenderer.rendererContext)
   })
 
-  bench('renderScripts - vite (large)', () => {
+  bench('renderScripts - vite small (precomputed)', () => {
+    renderScripts({ modules: smallViteSet }, vitePrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderScripts - vite large (manifest)', () => {
     renderScripts({ modules: largeViteSet }, viteRenderer.rendererContext)
   })
 
-  bench('renderScripts - vite (very large)', () => {
+  bench('renderScripts - vite large (precomputed)', () => {
+    renderScripts({ modules: largeViteSet }, vitePrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderScripts - vite very large (manifest)', () => {
     renderScripts({ modules: largeLargeViteSet }, largeViteRenderer.rendererContext)
   })
 
-  bench('renderResourceHints - vite (small)', () => {
+  bench('renderScripts - vite very large (precomputed)', () => {
+    renderScripts({ modules: largeLargeViteSet }, largeVitePrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderResourceHints - vite small (manifest)', () => {
     renderResourceHints({ modules: smallViteSet }, viteRenderer.rendererContext)
   })
 
-  bench('renderResourceHints - vite (large)', () => {
+  bench('renderResourceHints - vite small (precomputed)', () => {
+    renderResourceHints({ modules: smallViteSet }, vitePrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderResourceHints - vite large (manifest)', () => {
     renderResourceHints({ modules: largeViteSet }, viteRenderer.rendererContext)
   })
 
-  bench('renderResourceHints - vite (very large)', () => {
+  bench('renderResourceHints - vite large (precomputed)', () => {
+    renderResourceHints({ modules: largeViteSet }, vitePrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderResourceHints - vite very large (manifest)', () => {
     renderResourceHints({ modules: largeLargeViteSet }, largeViteRenderer.rendererContext)
   })
 
-  bench('renderStyles - webpack', () => {
+  bench('renderResourceHints - vite very large (precomputed)', () => {
+    renderResourceHints({ modules: largeLargeViteSet }, largeVitePrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderStyles - webpack (manifest)', () => {
     renderStyles({ modules: smallWebpackSet }, webpackRenderer.rendererContext)
   })
 
-  bench('renderScripts - webpack', () => {
+  bench('renderStyles - webpack (precomputed)', () => {
+    renderStyles({ modules: smallWebpackSet }, webpackPrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderScripts - webpack (manifest)', () => {
     renderScripts({ modules: smallWebpackSet }, webpackRenderer.rendererContext)
   })
 
-  bench('renderResourceHints - webpack', () => {
+  bench('renderScripts - webpack (precomputed)', () => {
+    renderScripts({ modules: smallWebpackSet }, webpackPrecomputedRenderer.rendererContext)
+  })
+
+  bench('renderResourceHints - webpack (manifest)', () => {
     renderResourceHints({ modules: smallWebpackSet }, webpackRenderer.rendererContext)
   })
+
+  bench('renderResourceHints - webpack (precomputed)', () => {
+    renderResourceHints({ modules: smallWebpackSet }, webpackPrecomputedRenderer.rendererContext)
+  })
 })

src/index.ts

@@ -1,4 +1,6 @@
 export { normalizeViteManifest } from './vite'
 export { normalizeWebpackManifest } from './webpack'
+export { precomputeDependencies } from './precompute'
+export type { PrecomputedData } from './precompute'
 
 export * from './types'

src/precompute.ts

@@ -0,0 +1,130 @@
+import type { Manifest, ResourceMeta } from './types'
+import type { ModuleDependencies } from './runtime'
+
+export interface PrecomputedData {
+  /** Pre-resolved dependencies for each module */
+  dependencies: Record<string, ModuleDependencies>
+  /** List of entry point module IDs */
+  entrypoints: string[]
+  /** Module metadata needed at runtime (file paths, etc.) */
+  modules: Record<string, Pick<ResourceMeta, 'file' | 'resourceType' | 'mimeType' | 'module'>>
+}
+
+/**
+ * Build-time utility to precompute all module dependencies from a manifest.
+ * This eliminates recursive dependency resolution at runtime.
+ *
+ * @param manifest The build manifest
+ * @returns Serializable precomputed data for runtime use
+ */
+export function precomputeDependencies(manifest: Manifest): PrecomputedData {
+  const dependencies: Record<string, ModuleDependencies> = {}
+  const computing = new Set<string>()
+
+  function computeDependencies(id: string): ModuleDependencies {
+    if (dependencies[id]) {
+      return dependencies[id]
+    }
+
+    if (computing.has(id)) {
+      // Circular dependency detected, return empty to break cycle
+      return { scripts: {}, styles: {}, preload: {}, prefetch: {} }
+    }
+
+    computing.add(id)
+
+    const deps: ModuleDependencies = {
+      scripts: {},
+      styles: {},
+      preload: {},
+      prefetch: {},
+    }
+
+    const meta = manifest[id]
+    if (!meta) {
+      dependencies[id] = deps
+      computing.delete(id)
+      return deps
+    }
+
+    // Add to scripts + preload
+    if (meta.file) {
+      deps.preload[id] = meta
+      if (meta.isEntry || meta.sideEffects) {
+        deps.scripts[id] = meta
+      }
+    }
+
+    // Add styles + preload
+    for (const css of meta.css || []) {
+      const cssResource = manifest[css]
+      if (cssResource) {
+        deps.styles[css] = cssResource
+        deps.preload[css] = cssResource
+        deps.prefetch[css] = cssResource
+      }
+    }
+
+    // Add assets as preload
+    for (const asset of meta.assets || []) {
+      const assetResource = manifest[asset]
+      if (assetResource) {
+        deps.preload[asset] = assetResource
+        deps.prefetch[asset] = assetResource
+      }
+    }
+
+    // Resolve nested dependencies and merge
+    for (const depId of meta.imports || []) {
+      const depDeps = computeDependencies(depId)
+      Object.assign(deps.styles, depDeps.styles)
+      Object.assign(deps.preload, depDeps.preload)
+      Object.assign(deps.prefetch, depDeps.prefetch)
+    }
+
+    // Filter preload based on preload flag
+    const filteredPreload: ModuleDependencies['preload'] = {}
+    for (const depId in deps.preload) {
+      const dep = deps.preload[depId]
+      if (dep.preload) {
+        filteredPreload[depId] = dep
+      }
+    }
+    deps.preload = filteredPreload
+
+    dependencies[id] = deps
+    computing.delete(id)
+    return deps
+  }
+
+  // Pre-compute dependencies for all modules in manifest
+  for (const moduleId of Object.keys(manifest)) {
+    computeDependencies(moduleId)
+  }
+
+  // Extract entry points
+  const entrypoints = new Set<string>()
+  for (const key in manifest) {
+    const meta = manifest[key]
+    if (meta?.isEntry) {
+      entrypoints.add(key)
+    }
+  }
+
+  // Extract minimal module metadata needed at runtime
+  const modules: Record<string, Pick<ResourceMeta, 'file' | 'resourceType' | 'mimeType' | 'module'>> = {}
+  for (const [moduleId, meta] of Object.entries(manifest)) {
+    modules[moduleId] = {
+      file: meta.file,
+      resourceType: meta.resourceType,
+      mimeType: meta.mimeType,
+      module: meta.module,
+    }
+  }
+
+  return {
+    dependencies,
+    entrypoints: [...entrypoints],
+    modules,
+  }
+}