Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: reuse the generated dynamic import

Browse Source
This commit is contained in:
tbitw2549 2024-08-16 18:47:09 +03:00
parent 784c34fc91
commit 47e2443a37
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/nuxt/src/components/loader.ts
View File

@ -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))' : ''})`)
}

8
packages/nuxt/src/components/runtime/client-delayed-component.ts
View File

@ -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({