From 53db8125f1fed180698510ad132c4c82f8651f5a Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 13 Apr 2023 20:08:08 +0100
Subject: [PATCH] perf(nuxt): share lazy component definitions (#20259)

---
 packages/nuxt/src/components/templates.ts | 27 +++++++++--------------
 test/bundle.test.ts                       |  2 +-
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/nuxt/src/components/templates.ts b/packages/nuxt/src/components/templates.ts
index 19dd42eb24..7fd32f3cb7 100644
--- a/packages/nuxt/src/components/templates.ts
+++ b/packages/nuxt/src/components/templates.ts
@@ -28,26 +28,20 @@ const createImportMagicComments = (options: ImportMagicCommentsOptions) => {
 export const componentsPluginTemplate: NuxtPluginTemplate<ComponentsTemplateContext> = {
   filename: 'components.plugin.mjs',
   getContents ({ options }) {
-    const globalComponents = options.getComponents().filter(c => c.global === true)
-
-    return `import { defineAsyncComponent } from 'vue'
-import { defineNuxtPlugin } from '#app/nuxt'
-
-const components = ${genObjectFromRawEntries(globalComponents.map((c) => {
-  const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
-  const comment = createImportMagicComments(c)
-
-  return [c.pascalName, `defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`]
-}))}
+    return `import { defineNuxtPlugin } from '#app/nuxt'
+import { lazyGlobalComponents } from '#components'
 
 export default defineNuxtPlugin({
-  name: 'nuxt:global-components',
+  name: 'nuxt:global-components',` +
+      (options.getComponents().filter(c => c.global).length
+        ? `
   setup (nuxtApp) {
-    for (const name in components) {
-      nuxtApp.vueApp.component(name, components[name])
-      nuxtApp.vueApp.component('Lazy' + name, components[name])
+    for (const name in lazyGlobalComponents) {
+      nuxtApp.vueApp.component(name, lazyGlobalComponents[name])
+      nuxtApp.vueApp.component('Lazy' + name, lazyGlobalComponents[name])
     }
-  }
+  }`
+        : '') + `
 })
 `
   }
@@ -81,6 +75,7 @@ export const componentsTemplate: NuxtTemplate<ComponentsTemplateContext> = {
     return [
       ...imports,
       ...components,
+      `export const lazyGlobalComponents = ${genObjectFromRawEntries(options.getComponents().filter(c => c.global).map(c => [c.pascalName, `Lazy${c.pascalName}`]))}`,
       `export const componentNames = ${JSON.stringify(options.getComponents().filter(c => !c.island).map(c => c.pascalName))}`
     ].join('\n')
   }
diff --git a/test/bundle.test.ts b/test/bundle.test.ts
index 938dbc37f9..8ff9925618 100644
--- a/test/bundle.test.ts
+++ b/test/bundle.test.ts
@@ -48,7 +48,7 @@ describe.skipIf(isWindows || process.env.TEST_BUILDER === 'webpack' || process.e
 
   it('default server bundle size', async () => {
     stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect(roundToKilobytes(stats.server.totalBytes)).toMatchInlineSnapshot('"92.6k"')
+    expect(roundToKilobytes(stats.server.totalBytes)).toMatchInlineSnapshot('"92.4k"')
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"2650k"')