diff --git a/packages/kit/src/internal/template.ts b/packages/kit/src/internal/template.ts index 86b97d74834..9be902eb7ec 100644 --- a/packages/kit/src/internal/template.ts +++ b/packages/kit/src/internal/template.ts @@ -3,6 +3,8 @@ import lodashTemplate from 'lodash.template' import { genSafeVariableName, genDynamicImport, genImport } from 'knitwork' import type { NuxtTemplate } from '@nuxt/schema' +import { relative } from 'pathe' +import { hash } from 'ohash' export async function compileTemplate (template: NuxtTemplate, ctx: any) { const data = { ...ctx, options: template.options } @@ -23,16 +25,25 @@ export async function compileTemplate (template: NuxtTemplate, ctx: any) { const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1')) -const importSources = (sources: string | string[], { lazy = false } = {}) => { +const importSources = (sources: string | string[], root: string, { lazy = false } = {}) => { if (!Array.isArray(sources)) { sources = [sources] } - return sources.map((src) => { - if (lazy) { - return `const ${genSafeVariableName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}` - } - return genImport(src, genSafeVariableName(src)) - }).join('\n') + const exports: string[] = [] + const imports: string[] = [] + for (const src of sources) { + const path = relative(root, src) + const variable = genSafeVariableName(path).replace(/_(45|46|47)/g, '_') + '_' + hash(path) + exports.push(variable) + imports.push(lazy + ? `const ${variable} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}` + : genImport(src, variable) + ) + } + return { + exports, + imports + } } export const templateUtils = { serialize, importName: genSafeVariableName, importSources } diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts index 81a5e95b4e7..c92f3010faf 100644 --- a/packages/nuxt/src/core/templates.ts +++ b/packages/nuxt/src/core/templates.ts @@ -48,9 +48,11 @@ export const clientPluginTemplate = { filename: 'plugins/client.mjs', getContents (ctx: TemplateContext) { const clientPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'server') + const rootDir = ctx.nuxt.options.rootDir + const { imports, exports } = templateUtils.importSources(clientPlugins.map(p => p.src), rootDir) return [ - templateUtils.importSources(clientPlugins.map(p => p.src)), - `export default ${genArrayFromRaw(clientPlugins.map(p => genSafeVariableName(p.src)))}` + ...imports, + `export default ${genArrayFromRaw(exports)}` ].join('\n') } } @@ -59,12 +61,14 @@ export const serverPluginTemplate = { filename: 'plugins/server.mjs', getContents (ctx: TemplateContext) { const serverPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'client') + const rootDir = ctx.nuxt.options.rootDir + const { imports, exports } = templateUtils.importSources(serverPlugins.map(p => p.src), rootDir) return [ "import preload from '#app/plugins/preload.server'", - templateUtils.importSources(serverPlugins.map(p => p.src)), + ...imports, `export default ${genArrayFromRaw([ 'preload', - ...serverPlugins.map(p => genSafeVariableName(p.src)) + ...exports ])}` ].join('\n') }