fix: render modules with async and omit prefetch type (#26)

* fix: render modules with `async` and omit prefetch type

* fix: remove `defer`/`async` rendering

* fix: add `defer` if not module

Author: danielroe

src/renderer.ts

@@ -335,15 +335,19 @@ export function renderPreloadLinks (ssrContext: SSRContext, rendererContext: Ren
 
 export function renderPrefetchLinks (ssrContext: SSRContext, rendererContext: RendererContext): string {
   const { prefetch } = getRequestDependencies(ssrContext, rendererContext)
-  return Object.values(prefetch).map(({ path }) =>
-    `<link ${isModule(path) ? 'type="module" ' : ''}rel="prefetch${isCSS(path) ? ' stylesheet' : ''}" href="${rendererContext.publicPath}${path}">`
+  return Object.values(prefetch).map(({ path }) => {
+    const rel = 'prefetch' + (isCSS(path) ? ' stylesheet' : '')
+    const as = isJS(path) ? ' as="script"' : ''
+
+    return `<link rel="${rel}"${as} href="${rendererContext.publicPath}${path}">`
+  }
   ).join('')
 }
 
 export function renderScripts (ssrContext: SSRContext, rendererContext: RendererContext): string {
   const { scripts } = getRequestDependencies(ssrContext, rendererContext)
   return Object.values(scripts).map(({ path, type }) =>
-    `<script${type === 'module' ? ' type="module"' : ''} src="${rendererContext.publicPath}${path}" defer></script>`
+    `<script${type === 'module' ? ' type="module"' : ''} src="${rendererContext.publicPath}${path}"${type !== 'module' ? ' defer' : ''}></script>`
   ).join('')
 }
 

test/renderer.test.ts

@@ -21,8 +21,8 @@ describe('renderer', () => {
     const { renderScripts } = await getRenderer()
     const result = renderScripts().split('</script>').slice(0, -1).map(s => `${s}</script>`).sort()
     expect(result).to.deep.equal([
-      '<script type="module" src="/entry.mjs" defer></script>',
-      '<script type="module" src="/index.mjs" defer></script>'
+      '<script type="module" src="/entry.mjs"></script>',
+      '<script type="module" src="/index.mjs"></script>'
     ])
   })
   it('renders styles correctly', async () => {
@@ -80,7 +80,7 @@ describe('renderer with legacy manifest', () => {
     expect(result).to.deep.equal(
       [
         '<link rel="prefetch stylesheet" href="/_nuxt/pages/another.css">', // dynamic import CSS
-        '<link rel="prefetch" href="/_nuxt/pages/another.js">', // dynamic import
+        '<link rel="prefetch" as="script" href="/_nuxt/pages/another.js">', // dynamic import
         '<link rel="preload" href="/_nuxt/app.css" as="style">', // entrypoint CSS
         '<link rel="preload" href="/_nuxt/app.js" as="script">',
         '<link rel="preload" href="/_nuxt/commons/app.js" as="script">',