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 = { 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 = { 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"')