perf: render non-blocking style prefetches (#39)

Author: danielroe

src/runtime.ts

@@ -223,8 +223,8 @@ export function getPreloadLinks (ssrContext: SSRContext, rendererContext: Render
 export function getPrefetchLinks (ssrContext: SSRContext, rendererContext: RendererContext): LinkAttributes[] {
   const { prefetch } = getRequestDependencies(ssrContext, rendererContext)
   return Object.values(prefetch).map(resource => ({
-    rel: 'prefetch' + (resource.resourceType === 'style' ? ' stylesheet' : ''),
-    as: resource.resourceType !== 'style' ? resource.resourceType : null,
+    rel: 'prefetch',
+    as: resource.resourceType,
     type: resource.mimeType ?? null,
     crossorigin: resource.resourceType === 'font' || resource.module ? '' : null,
     href: rendererContext.buildAssetsURL(resource.file)

test/compat.test.ts

@@ -87,9 +87,9 @@ describe('renderer with webpack manifest', () => {
     const result = renderResourceHints().split('>').slice(0, -1).map(s => `${s}>`).sort()
     expect(result).to.deep.equal(
       [
-        '<link rel="prefetch stylesheet" href="/_nuxt/pages/another.css">', // dynamic import CSS
         '<link rel="prefetch" as="image" type="image/svg+xml" href="/_nuxt/img/logo.41f2f89.svg">',
         '<link rel="prefetch" as="script" href="/_nuxt/pages/another.js">', // dynamic import
+        '<link rel="prefetch" as="style" href="/_nuxt/pages/another.css">', // dynamic import CSS
         '<link rel="preload" as="script" href="/_nuxt/app.js">',
         '<link rel="preload" as="script" href="/_nuxt/commons/app.js">',
         '<link rel="preload" as="script" href="/_nuxt/pages/index.js">', // dynamic entrypoint

test/renderer.test.ts

@@ -80,11 +80,11 @@ describe('renderer', () => {
         "<link rel=\\"modulepreload\\" as=\\"script\\" crossorigin href=\\"/assets/about.mjs\\">",
         "<link rel=\\"modulepreload\\" as=\\"script\\" crossorigin href=\\"/assets/entry.mjs\\">",
         "<link rel=\\"modulepreload\\" as=\\"script\\" crossorigin href=\\"/assets/vendor.mjs\\">",
-        "<link rel=\\"prefetch stylesheet\\" href=\\"/assets/index.css\\">",
-        "<link rel=\\"prefetch stylesheet\\" href=\\"/assets/lazy-component.css\\">",
         "<link rel=\\"prefetch\\" as=\\"image\\" type=\\"image/png\\" href=\\"/assets/entry.png\\">",
         "<link rel=\\"prefetch\\" as=\\"script\\" crossorigin href=\\"/assets/index.mjs\\">",
         "<link rel=\\"prefetch\\" as=\\"script\\" crossorigin href=\\"/assets/lazy-component.mjs\\">",
+        "<link rel=\\"prefetch\\" as=\\"style\\" href=\\"/assets/index.css\\">",
+        "<link rel=\\"prefetch\\" as=\\"style\\" href=\\"/assets/lazy-component.css\\">",
         "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/about.css\\">",
         "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/test.css\\">",
       ]
@@ -103,7 +103,6 @@ describe('renderer', () => {
         "<link rel=\\"modulepreload\\" as=\\"script\\" crossorigin href=\\"/assets/entry.mjs\\">",
         "<link rel=\\"modulepreload\\" as=\\"script\\" crossorigin href=\\"/assets/lazy-component.mjs\\">",
         "<link rel=\\"modulepreload\\" as=\\"script\\" crossorigin href=\\"/assets/vendor.mjs\\">",
-        "<link rel=\\"prefetch stylesheet\\" href=\\"/assets/index.css\\">",
         "<link rel=\\"prefetch\\" as=\\"audio\\" href=\\"/assets/lazy-component.mp3\\">",
         "<link rel=\\"prefetch\\" as=\\"font\\" type=\\"font/woff\\" crossorigin href=\\"/assets/lazy-component.woff\\">",
         "<link rel=\\"prefetch\\" as=\\"font\\" type=\\"font/woff2\\" crossorigin href=\\"/assets/lazy-component.woff2\\">",
@@ -113,6 +112,7 @@ describe('renderer', () => {
         "<link rel=\\"prefetch\\" as=\\"image\\" type=\\"image/svg+xml\\" href=\\"/assets/lazy-component.svg\\">",
         "<link rel=\\"prefetch\\" as=\\"image\\" type=\\"image/x-icon\\" href=\\"/assets/lazy-component.ico\\">",
         "<link rel=\\"prefetch\\" as=\\"script\\" crossorigin href=\\"/assets/index.mjs\\">",
+        "<link rel=\\"prefetch\\" as=\\"style\\" href=\\"/assets/index.css\\">",
         "<link rel=\\"prefetch\\" as=\\"video\\" href=\\"/assets/lazy-component.mp4\\">",
         "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/about.css\\">",
         "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/lazy-component.css\\">",