feat(vue-renderer): allow adding async attribute to `<script>` tags (#8347)

packages/types/config/render.d.ts

@@ -68,6 +68,7 @@ export interface NuxtOptionsRender {
     ) => string[]
   }
   injectScripts?: boolean
+  asyncScripts?: boolean
   resourceHints?: boolean
   ssr?: boolean
   ssrLog?: boolean | 'collapsed'

packages/vue-renderer/src/renderers/modern.js

@@ -51,7 +51,7 @@ export default class ModernRenderer extends SSRRenderer {
       return scripts
     }
 
-    const scriptPattern = /<script[^>]*?src="([^"]*?)" defer><\/script>/g
+    const scriptPattern = /<script[^>]*?src="([^"]*?)" defer( async)?><\/script>/g
 
     const modernScripts = scripts.replace(scriptPattern, (scriptTag, jsFile) => {
       const legacyJsFile = jsFile.replace(this.publicPath, '')

packages/vue-renderer/src/renderers/ssr.js

@@ -42,7 +42,11 @@ export default class SSRRenderer extends BaseRenderer {
   }
 
   renderScripts (renderContext) {
-    return this.addAttrs(renderContext.renderScripts(), 'script')
+    let renderedScripts = this.addAttrs(renderContext.renderScripts(), 'script')
+    if (this.options.render.asyncScripts) {
+      renderedScripts = renderedScripts.replace(/defer>/g, 'defer async>')
+    }
+    return renderedScripts
   }
 
   renderStyles (renderContext) {
@@ -190,7 +194,11 @@ export default class SSRRenderer extends BaseRenderer {
         const statePath = urlJoin(url, 'state.js')
         const stateUrl = urlJoin(staticAssetsBase, statePath)
         staticAssets.push({ path: statePath, src: stateScript })
-        APP += `<script defer src="${stateUrl}"></script>`
+        if (this.options.render.asyncScripts) {
+          APP += `<script defer async src="${stateUrl}"></script>`
+        } else {
+          APP += `<script defer src="${stateUrl}"></script>`
+        }
         preloadScripts.push(stateUrl)
       } else {
         APP += `<script>${stateScript}</script>`

test/dev/basic.ssr.test.js

@@ -414,6 +414,11 @@ describe('basic ssr', () => {
     expect(html).toContain('Auto discovered component!')
   })
 
+  test('/ (normal <script>)', async () => {
+    const { html } = await nuxt.server.renderRoute('/')
+    expect(html).toContain('" defer>')
+  })
+
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await nuxt.close()

test/dev/with-config.test.js

@@ -62,6 +62,11 @@ describe('with-config', () => {
     expect(html).toContain('<script src="/test/orion/')
   })
 
+  test('/ (async <script>)', async () => {
+    const { html } = await nuxt.server.renderRoute('/')
+    expect(html).toContain('" defer async>')
+  })
+
   test('/ (custom postcss.config.js)', async () => {
     const { html } = await nuxt.server.renderRoute('/')
     expect(html).toContain('::-moz-placeholder')

test/fixtures/with-config/nuxt.config.js

@@ -100,6 +100,7 @@ export default {
       push: true,
       shouldPush: (file, type) => type === 'script'
     },
+    asyncScripts: true,
     bundleRenderer: {
       shouldPreload: (file, type) => {
         return ['script', 'style', 'font'].includes(type)