From 47e2443a374bf4400ceb38379daa37ec6eaca0b4 Mon Sep 17 00:00:00 2001
From: tbitw2549 <yonshi29@gmail.com>
Date: Fri, 16 Aug 2024 18:47:09 +0300
Subject: [PATCH] refactor: reuse the generated dynamic import

---
 packages/nuxt/src/components/loader.ts                    | 8 ++++----
 .../src/components/runtime/client-delayed-component.ts    | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts
index 2b4779e84c..d7708af946 100644
--- a/packages/nuxt/src/components/loader.ts
+++ b/packages/nuxt/src/components/loader.ts
@@ -75,29 +75,29 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
           }
 
           if (lazy) {
-            imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
             if (modifier && normalComponent && nuxt?.options.experimental.delayedHydration === true) {
               switch (modifier) {
                 case 'Visible':
                 case 'visible-':
                   imports.add(genImport(clientDelayedComponentRuntime, [{ name: 'createLazyIOComponent' }]))
                   identifier += '_delayedIO'
-                  imports.add(`const ${identifier} = createLazyIOComponent(__defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)))`)
+                  imports.add(`const ${identifier} = createLazyIOComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c))`)
                   break
                 case 'Event':
                 case 'event-':
                   imports.add(genImport(clientDelayedComponentRuntime, [{ name: 'createLazyEventComponent' }]))
                   identifier += '_delayedEvent'
-                  imports.add(`const ${identifier} = createLazyEventComponent(__defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)))`)
+                  imports.add(`const ${identifier} = createLazyEventComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c))`)
                   break
                 case 'Idle':
                 case 'idle-':
                   imports.add(genImport(clientDelayedComponentRuntime, [{ name: 'createLazyNetworkComponent' }]))
                   identifier += '_delayedNetwork'
-                  imports.add(`const ${identifier} = createLazyNetworkComponent(__defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)))`)
+                  imports.add(`const ${identifier} = createLazyNetworkComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c))`)
                   break
               }
             } else {
+              imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
               identifier += '_lazy'
               imports.add(`const ${identifier} = __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`)
             }
diff --git a/packages/nuxt/src/components/runtime/client-delayed-component.ts b/packages/nuxt/src/components/runtime/client-delayed-component.ts
index 10dcf23aa2..e57aaab221 100644
--- a/packages/nuxt/src/components/runtime/client-delayed-component.ts
+++ b/packages/nuxt/src/components/runtime/client-delayed-component.ts
@@ -17,14 +17,14 @@ export const createLazyIOComponent = (componentLoader: AsyncComponentLoader) =>
     inheritAttrs: false,
     setup (_, { attrs }) {
       if (import.meta.server) {
-        return () => h(componentLoader, attrs)
+        return () => h(defineAsyncComponent(componentLoader), attrs)
       }
 
       const nuxt = useNuxtApp()
       const instance = getCurrentInstance()!
 
       if (instance.vnode.el && nuxt.isHydrating && elementIsVisibleInViewport(instance.vnode.el as Element)) {
-        return h(componentLoader, attrs)
+        return () => h(defineAsyncComponent(componentLoader), attrs)
       }
 
       return () => h(defineAsyncComponent({
@@ -41,7 +41,7 @@ export const createLazyNetworkComponent = (componentLoader: AsyncComponentLoader
     inheritAttrs: false,
     setup (_, { attrs }) {
       if (import.meta.server) {
-        return () => h(componentLoader, attrs)
+        return () => h(defineAsyncComponent(componentLoader), attrs)
       }
       return () => defineAsyncComponent({
         loader: componentLoader,
@@ -57,7 +57,7 @@ export const createLazyEventComponent = (componentLoader: AsyncComponentLoader)
     inheritAttrs: false,
     setup (_, { attrs }) {
       if (import.meta.server) {
-        return () => h(componentLoader, attrs)
+        return () => h(defineAsyncComponent(componentLoader), attrs)
       }
       const events: Array<keyof HTMLElementEventMap> = attrs.hydrate as Array<keyof HTMLElementEventMap> ?? ['mouseover']
       return () => h(defineAsyncComponent({