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

perf(nuxt): share lazy component definitions (#20259)

Browse Source
This commit is contained in:
Daniel Roe 2023-04-13 20:08:08 +01:00 committed by GitHub
parent b0c35291b6
commit 53db8125f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/nuxt/src/components/templates.ts
View File

@ -28,26 +28,20 @@ const createImportMagicComments = (options: ImportMagicCommentsOptions) => {
export const componentsPluginTemplate: NuxtPluginTemplate<ComponentsTemplateContext> = { export const componentsPluginTemplate: NuxtPluginTemplate<ComponentsTemplateContext> = {
filename: 'components.plugin.mjs', filename: 'components.plugin.mjs',
getContents ({ options }) { getContents ({ options }) {
const globalComponents = options.getComponents().filter(c => c.global === true) return `import { defineNuxtPlugin } from '#app/nuxt'
import { lazyGlobalComponents } from '#components'
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}))`]
}))}
export default defineNuxtPlugin({ export default defineNuxtPlugin({
name: 'nuxt:global-components', name: 'nuxt:global-components',` +
(options.getComponents().filter(c => c.global).length
? `
setup (nuxtApp) { setup (nuxtApp) {
for (const name in components) { for (const name in lazyGlobalComponents) {
nuxtApp.vueApp.component(name, components[name]) nuxtApp.vueApp.component(name, lazyGlobalComponents[name])
nuxtApp.vueApp.component('Lazy' + name, components[name]) nuxtApp.vueApp.component('Lazy' + name, lazyGlobalComponents[name])
} }
} }`
: '') + `
}) })
` `
} }
@ -81,6 +75,7 @@ export const componentsTemplate: NuxtTemplate<ComponentsTemplateContext> = {
return [ return [
...imports, ...imports,
...components, ...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))}` `export const componentNames = ${JSON.stringify(options.getComponents().filter(c => !c.island).map(c => c.pascalName))}`
].join('\n') ].join('\n')
} }

2
test/bundle.test.ts
View File

@ -48,7 +48,7 @@ describe.skipIf(isWindows || process.env.TEST_BUILDER === 'webpack' || process.e
it('default server bundle size', async () => { it('default server bundle size', async () => {
stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir) 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) const modules = await analyzeSizes('node_modules/**/*', serverDir)
expect(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"2650k"') expect(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"2650k"')