perf: use inline templates for rendering html

Author: danielroe

src/runtime.ts

@@ -210,56 +210,152 @@ export function getRequestDependencies(ssrContext: SSRContext, rendererContext:
 
 export function renderStyles(ssrContext: SSRContext, rendererContext: RendererContext): string {
   const { styles } = getRequestDependencies(ssrContext, rendererContext)
-  return Object.values(styles).map(resource =>
-    renderLinkToString({ rel: 'stylesheet', href: rendererContext.buildAssetsURL(resource.file), crossorigin: '' }),
-  ).join('')
+  let result = ''
+  for (const key in styles) {
+    const resource = styles[key]!
+    result += `<link rel="stylesheet" href="${rendererContext.buildAssetsURL(resource.file)}" crossorigin>`
+  }
+  return result
 }
 
 export function getResources(ssrContext: SSRContext, rendererContext: RendererContext): LinkAttributes[] {
   return [...getPreloadLinks(ssrContext, rendererContext), ...getPrefetchLinks(ssrContext, rendererContext)]
 }
 
-export function renderResourceHints(ssrContext: SSRContext, rendererContext: RendererContext): string {
-  return getResources(ssrContext, rendererContext).map(renderLinkToString).join('')
+function renderResourceHints(ssrContext: SSRContext, rendererContext: RendererContext): string {
+  const { preload, prefetch } = getRequestDependencies(ssrContext, rendererContext)
+  let result = ''
+
+  // Render preload links
+  for (const key in preload) {
+    const resource = preload[key]!
+    const href = rendererContext.buildAssetsURL(resource.file)
+    const rel = resource.module ? 'modulepreload' : 'preload'
+    const crossorigin = (resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module) ? ' crossorigin' : ''
+
+    if (resource.resourceType && resource.mimeType) {
+      result += `<link rel="${rel}" as="${resource.resourceType}" type="${resource.mimeType}"${crossorigin} href="${href}">`
+    }
+    else if (resource.resourceType) {
+      result += `<link rel="${rel}" as="${resource.resourceType}"${crossorigin} href="${href}">`
+    }
+    else {
+      result += `<link rel="${rel}"${crossorigin} href="${href}">`
+    }
+  }
+  // Render prefetch links
+  for (const key in prefetch) {
+    const resource = prefetch[key]!
+    const href = rendererContext.buildAssetsURL(resource.file)
+    const crossorigin = (resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module) ? ' crossorigin' : ''
+
+    if (resource.resourceType && resource.mimeType) {
+      result += `<link rel="prefetch" as="${resource.resourceType}" type="${resource.mimeType}"${crossorigin} href="${href}">`
+    }
+    else if (resource.resourceType) {
+      result += `<link rel="prefetch" as="${resource.resourceType}"${crossorigin} href="${href}">`
+    }
+    else {
+      result += `<link rel="prefetch"${crossorigin} href="${href}">`
+    }
+  }
+
+  return result
 }
 
-export function renderResourceHeaders(ssrContext: SSRContext, rendererContext: RendererContext): Record<string, string> {
+function renderResourceHeaders(ssrContext: SSRContext, rendererContext: RendererContext): Record<string, string> {
+  const { preload, prefetch } = getRequestDependencies(ssrContext, rendererContext)
+  const links: string[] = []
+
+  // Render preload headers
+  for (const key in preload) {
+    const resource = preload[key]!
+    const href = rendererContext.buildAssetsURL(resource.file)
+    const rel = resource.module ? 'modulepreload' : 'preload'
+    let header = `<${href}>; rel="${rel}"`
+
+    if (resource.resourceType) {
+      header += `; as="${resource.resourceType}"`
+    }
+    if (resource.mimeType) {
+      header += `; type="${resource.mimeType}"`
+    }
+    if (resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module) {
+      header += '; crossorigin'
+    }
+
+    links.push(header)
+  }
+
+  // Render prefetch headers
+  for (const key in prefetch) {
+    const resource = prefetch[key]!
+    const href = rendererContext.buildAssetsURL(resource.file)
+    let header = `<${href}>; rel="prefetch"`
+
+    if (resource.resourceType) {
+      header += `; as="${resource.resourceType}"`
+    }
+    if (resource.mimeType) {
+      header += `; type="${resource.mimeType}"`
+    }
+    if (resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module) {
+      header += '; crossorigin'
+    }
+
+    links.push(header)
+  }
+
   return {
-    link: getResources(ssrContext, rendererContext).map(renderLinkToHeader).join(', '),
+    link: links.join(', '),
   }
 }
 
 export function getPreloadLinks(ssrContext: SSRContext, rendererContext: RendererContext): LinkAttributes[] {
   const { preload } = getRequestDependencies(ssrContext, rendererContext)
-  return Object.values(preload)
-    .map(resource => ({
+  const result: LinkAttributes[] = []
+  for (const key in preload) {
+    const resource = preload[key]!
+    result.push({
       rel: resource.module ? 'modulepreload' : 'preload',
       as: resource.resourceType,
       type: resource.mimeType ?? null,
       crossorigin: resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
       href: rendererContext.buildAssetsURL(resource.file),
-    }))
+    })
+  }
+  return result
 }
 
 export function getPrefetchLinks(ssrContext: SSRContext, rendererContext: RendererContext): LinkAttributes[] {
   const { prefetch } = getRequestDependencies(ssrContext, rendererContext)
-  return Object.values(prefetch).map(resource => ({
-    rel: 'prefetch',
-    as: resource.resourceType,
-    type: resource.mimeType ?? null,
-    crossorigin: resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
-    href: rendererContext.buildAssetsURL(resource.file),
-  }))
+  const result: LinkAttributes[] = []
+  for (const key in prefetch) {
+    const resource = prefetch[key]!
+    result.push({
+      rel: 'prefetch',
+      as: resource.resourceType,
+      type: resource.mimeType ?? null,
+      crossorigin: resource.resourceType === 'style' || resource.resourceType === 'font' || resource.resourceType === 'script' || resource.module ? '' : null,
+      href: rendererContext.buildAssetsURL(resource.file),
+    })
+  }
+  return result
 }
 
 export function renderScripts(ssrContext: SSRContext, rendererContext: RendererContext): string {
   const { scripts } = getRequestDependencies(ssrContext, rendererContext)
-  return Object.values(scripts).map(resource => renderScriptToString({
-    type: resource.module ? 'module' : null,
-    src: rendererContext.buildAssetsURL(resource.file),
-    defer: resource.module ? null : '',
-    crossorigin: '',
-  })).join('')
+  let result = ''
+  for (const key in scripts) {
+    const resource = scripts[key]!
+    if (resource.module) {
+      result += `<script type="module" src="${rendererContext.buildAssetsURL(resource.file)}" crossorigin></script>`
+    }
+    else {
+      result += `<script src="${rendererContext.buildAssetsURL(resource.file)}" defer crossorigin></script>`
+    }
+  }
+  return result
 }
 
 export type RenderFunction = (ssrContext: SSRContext, rendererContext: RendererContext) => unknown
@@ -293,18 +389,3 @@ export function createRenderer<App>(createApp: ImportOf<CreateApp<App>>, renderO
     },
   }
 }
-
-// --- Internal ---
-
-// Utilities to render script and link tags, and link headers
-function renderScriptToString(attrs: Record<string, string | null>) {
-  return `<script${Object.entries(attrs).map(([key, value]) => value === null ? '' : value ? ` ${key}="${value}"` : ' ' + key).join('')}></script>`
-}
-
-function renderLinkToString(attrs: LinkAttributes) {
-  return `<link${Object.entries(attrs).map(([key, value]) => value === null ? '' : value ? ` ${key}="${value}"` : ' ' + key).join('')}>`
-}
-
-function renderLinkToHeader(attrs: LinkAttributes) {
-  return `<${attrs.href}>${Object.entries(attrs).map(([key, value]) => key === 'href' || value === null ? '' : value ? `; ${key}="${value}"` : `; ${key}`).join('')}`
-}