perf(kit,nuxt): reduce unnecessary iteration in nuxt code (#33212)

Author: danielroe

packages/kit/src/loader/nuxt.ts

@@ -31,10 +31,10 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
   // Apply dev as config override
   opts.overrides.dev = !!opts.dev
 
-  const resolvedPath = ['nuxt-nightly', 'nuxt3', 'nuxt', 'nuxt-edge']
-    .map(pkg => resolveModulePath(pkg, { try: true, from: [directoryToURL(opts.cwd!)] }))
-    .filter((p): p is NonNullable<typeof p> => !!p)
-    .sort((a, b) => b.length - a.length)[0]
+  const resolvedPath = ['nuxt-nightly', 'nuxt3', 'nuxt', 'nuxt-edge'].reduce((resolvedPath, pkg) => {
+    const path = resolveModulePath(pkg, { try: true, from: [directoryToURL(opts.cwd!)] })
+    return path && path.length > resolvedPath.length ? path : resolvedPath
+  }, '')
 
   if (!resolvedPath) {
     throw new Error(`Cannot find any nuxt version from ${opts.cwd}`)

packages/nuxt/src/app/composables/preload.ts

@@ -61,11 +61,11 @@ export async function preloadRouteComponents (to: RouteLocationRaw, router: Rout
 
   router._routePreloaded.add(path)
 
-  const components = matched
-    .map(component => component.components?.default)
-    .filter(component => typeof component === 'function')
-
-  for (const component of components) {
+  for (const route of matched) {
+    const component = route.components?.default
+    if (typeof component !== 'function') {
+      continue
+    }
     const promise = Promise.resolve((component as () => unknown)())
       .catch(() => {})
       .finally(() => promises.splice(promises.indexOf(promise)))

packages/nuxt/src/app/composables/router.ts

@@ -146,12 +146,14 @@ export const navigateTo = (to: RouteLocationRaw | undefined | null, options?: Na
   if (import.meta.client && options?.open) {
     const { target = '_blank', windowFeatures = {} } = options.open
 
-    const features = Object.entries(windowFeatures)
-      .filter(([_, value]) => value !== undefined)
-      .map(([feature, value]) => `${feature.toLowerCase()}=${value}`)
-      .join(', ')
+    const features: string[] = []
+    for (const [feature, value] of Object.entries(windowFeatures)) {
+      if (value !== undefined) {
+        features.push(`${feature.toLowerCase()}=${value}`)
+      }
+    }
 
-    open(toPath, target, features)
+    open(toPath, target, features.join(', '))
     return Promise.resolve()
   }
 

packages/nuxt/src/app/nuxt.ts

@@ -586,7 +586,10 @@ export function defineAppConfig<C extends AppConfigInput> (config: C): C {
 const loggedKeys = new Set<string>()
 function wrappedConfig (runtimeConfig: Record<string, unknown>) {
   if (!import.meta.dev || import.meta.server) { return runtimeConfig }
-  const keys = Object.keys(runtimeConfig).map(key => `\`${key}\``)
+  const keys: string[] = []
+  for (const key in runtimeConfig) {
+    keys.push(`\`${key}\``)
+  }
   const lastKey = keys.pop()
   return new Proxy(runtimeConfig, {
     get (target, p, receiver) {

packages/nuxt/src/components/plugins/islands-transform.ts

@@ -167,7 +167,13 @@ function isBinding (attr: string): boolean {
 function getPropsToString (bindings: Record<string, string>): string {
   const vfor = bindings['v-for']?.split(' in ').map((v: string) => v.trim()) as [string, string] | undefined
   if (Object.keys(bindings).length === 0) { return 'undefined' }
-  const content = Object.entries(bindings).filter(b => b[0] && (b[0] !== '_bind' && b[0] !== 'v-for')).map(([name, value]) => isBinding(name) ? `[\`${name.slice(1)}\`]: ${value}` : `[\`${name}\`]: \`${value}\``).join(',')
+  const contentParts: string[] = []
+  for (const [name, value] of Object.entries(bindings)) {
+    if (name && (name !== '_bind' && name !== 'v-for')) {
+      contentParts.push(isBinding(name) ? `[\`${name.slice(1)}\`]: ${value}` : `[\`${name}\`]: \`${value}\``)
+    }
+  }
+  const content = contentParts.join(',')
   const data = bindings._bind ? `__mergeProps(${bindings._bind}, { ${content} })` : `{ ${content} }`
   if (!vfor) {
     return `[${data}]`

packages/nuxt/src/components/templates.ts

@@ -65,7 +65,13 @@ export default defineNuxtPlugin({
 export const componentNamesTemplate: NuxtTemplate = {
   filename: 'component-names.mjs',
   getContents ({ app }) {
-    return `export const componentNames = ${JSON.stringify(app.components.filter(c => !c.island).map(c => c.pascalName))}`
+    const componentNames: string[] = []
+    for (const c of app.components) {
+      if (!c.island) {
+        componentNames.push(c.pascalName)
+      }
+    }
+    return `export const componentNames = ${JSON.stringify(componentNames)}`
   },
 }
 
@@ -106,16 +112,19 @@ export const componentsIslandsTemplate: NuxtTemplate = {
 const NON_VUE_RE = /\b\.(?!vue)\w+$/g
 function resolveComponentTypes (app: NuxtApp, baseDir: string) {
   const serverPlaceholderPath = resolve(distDir, 'app/components/server-placeholder')
-  const componentTypes = app.components.filter(c => !c.island).map((c) => {
-    const type = `typeof ${genDynamicImport(isAbsolute(c.filePath)
-      ? relative(baseDir, c.filePath).replace(NON_VUE_RE, '')
-      : c.filePath.replace(NON_VUE_RE, ''), { wrapper: false })}['${c.export}']`
-    const isServerOnly = c.mode === 'server' && c.filePath !== serverPlaceholderPath && !app.components.some(other => other.pascalName === c.pascalName && other.mode === 'client')
-    return [
-      c.pascalName,
-      isServerOnly ? `IslandComponent<${type}>` : type,
-    ]
-  })
+  const componentTypes: Array<[string, string]> = []
+  for (const c of app.components) {
+    if (!c.island) {
+      const type = `typeof ${genDynamicImport(isAbsolute(c.filePath)
+        ? relative(baseDir, c.filePath).replace(NON_VUE_RE, '')
+        : c.filePath.replace(NON_VUE_RE, ''), { wrapper: false })}['${c.export}']`
+      const isServerOnly = c.mode === 'server' && c.filePath !== serverPlaceholderPath && !app.components.some(other => other.pascalName === c.pascalName && other.mode === 'client')
+      componentTypes.push([
+        c.pascalName,
+        isServerOnly ? `IslandComponent<${type}>` : type,
+      ])
+    }
+  }
 
   return componentTypes
 }

packages/nuxt/src/core/modules.ts

@@ -1,34 +1,30 @@
-import { normalizeModuleTranspilePath, useNuxt } from '@nuxt/kit'
-
-interface AddModuleTranspilesOptions {
-  additionalModules?: string[]
-}
-
-export const addModuleTranspiles = (opts: AddModuleTranspilesOptions = {}) => {
-  const nuxt = useNuxt()
-
-  const modules = [
-    ...opts.additionalModules || [],
-    ...nuxt.options.modules,
-    ...nuxt.options._modules,
-  ]
-    .map(m => typeof m === 'string' ? m : Array.isArray(m) ? m[0] : m.src)
-    .filter(m => typeof m === 'string')
-    .map(normalizeModuleTranspilePath)
+import { normalizeModuleTranspilePath } from '@nuxt/kit'
+import type { Nuxt } from '@nuxt/schema'
+import escapeStringRegexp from 'escape-string-regexp'
 
+export const addModuleTranspiles = (nuxt: Nuxt) => {
   // Try to sanitize modules to better match imports
-  nuxt.options.build.transpile =
-    nuxt.options.build.transpile.map(m => typeof m === 'string' ? m.split('node_modules/').pop() : m)
-      .filter(<T>(x: T | undefined): x is T => !!x)
-
-  function isTranspilePresent (mod: string) {
-    return nuxt.options.build.transpile.some(t => !(t instanceof Function) && (t instanceof RegExp ? t.test(mod) : new RegExp(t).test(mod)))
+  const transpile: RegExp[] = []
+  for (const t of nuxt.options.build.transpile) {
+    if (t instanceof Function) {
+      continue
+    }
+    if (typeof t === 'string') {
+      transpile.push(new RegExp(escapeStringRegexp(t)))
+    } else {
+      transpile.push(t)
+    }
   }
 
-  // Automatically add used modules to the transpile
-  for (const module of modules) {
-    if (!isTranspilePresent(module)) {
-      nuxt.options.build.transpile.push(module)
+  for (const m of [...nuxt.options.modules, ...nuxt.options._modules]) {
+    const mod = typeof m === 'string' ? m : Array.isArray(m) ? m[0] : m.src
+    if (typeof mod !== 'string') {
+      continue
+    }
+    const path = normalizeModuleTranspilePath(mod)
+    // Automatically add used modules to the transpile
+    if (!transpile.some(t => t.test(path))) {
+      nuxt.options.build.transpile.push(path)
     }
   }
 }

packages/nuxt/src/core/nitro.ts

@@ -34,10 +34,25 @@ const PNPM_NODE_MODULES_RE = /\.pnpm\/.+\/node_modules\/(.+)$/
 export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
   // Resolve config
   const layerDirs = getLayerDirectories(nuxt)
-  const excludePaths = layerDirs.flatMap(dirs => [
-    dirs.root.match(NODE_MODULES_RE)?.[1]?.replace(/\/$/, ''),
-    dirs.root.match(PNPM_NODE_MODULES_RE)?.[1]?.replace(/\/$/, ''),
-  ].filter((dir): dir is string => Boolean(dir)).map(dir => escapeRE(dir)))
+  const excludePaths: string[] = []
+  for (const dirs of layerDirs) {
+    const paths = [
+      dirs.root.match(NODE_MODULES_RE)?.[1]?.replace(/\/$/, ''),
+      dirs.root.match(PNPM_NODE_MODULES_RE)?.[1]?.replace(/\/$/, ''),
+    ]
+    for (const dir of paths) {
+      if (dir) {
+        excludePaths.push(escapeRE(dir))
+      }
+    }
+  }
+
+  const layerPublicAssetsDirs: Array<{ dir: string }> = []
+  for (const dirs of layerDirs) {
+    if (existsSync(dirs.public)) {
+      layerPublicAssetsDirs.push({ dir: dirs.public })
+    }
+  }
 
   const excludePattern = excludePaths.length
     ? [new RegExp(`node_modules\\/(?!${excludePaths.join('|')})`)]
@@ -155,7 +170,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
               join(moduleDir, 'dist/runtime/server'),
             ]
           }),
-          ...getLayerDirectories(nuxt).map(dirs => relativeWithDot(nuxt.options.buildDir, join(dirs.shared, '**/*.d.ts'))),
+          ...layerDirs.map(dirs => relativeWithDot(nuxt.options.buildDir, join(dirs.shared, '**/*.d.ts'))),
         ],
         exclude: [
           ...nuxt.options.modulesDir.map(m => relativeWithDot(nuxt.options.buildDir, m)),
@@ -172,9 +187,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
             maxAge: 31536000 /* 1 year */,
             baseURL: nuxt.options.app.buildAssetsDir,
           },
-      ...getLayerDirectories(nuxt)
-        .filter(dirs => existsSync(dirs.public))
-        .map(dirs => ({ dir: dirs.public })),
+      ...layerPublicAssetsDirs,
     ],
     prerender: {
       ignoreUnprefixedPublicAssets: true,
@@ -198,7 +211,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
         'nuxt-nightly/dist',
         distDir,
         // Ensure app config files have auto-imports injected even if they are pure .js files
-        ...getLayerDirectories(nuxt).map(dirs => join(dirs.app, 'app.config')),
+        ...layerDirs.map(dirs => join(dirs.app, 'app.config')),
       ],
       traceInclude: [
         // force include files used in generated code from the runtime-compiler

packages/nuxt/src/core/nuxt.ts

@@ -398,9 +398,11 @@ async function initNuxt (nuxt: Nuxt) {
   nuxt.options.build.transpile.push('nuxt/app')
 
   // Transpile layers within node_modules
-  nuxt.options.build.transpile.push(
-    ...layerDirs.filter(i => i.root.includes('node_modules')).map(i => i.root.replace(/\/$/, '')),
-  )
+  for (const layer of layerDirs) {
+    if (layer.root.includes('node_modules')) {
+      nuxt.options.build.transpile.push(layer.root.replace(/\/$/, ''))
+    }
+  }
 
   // Ensure we can resolve dependencies within layers - filtering out local `~~/layers` directories
   const locallyScannedLayersDirs = layerDirs.map(l => join(l.root, 'layers/'))
@@ -731,10 +733,15 @@ export default defineNuxtPlugin({
     }
   })
 
-  // Normalize windows transpile paths added by modules
-  nuxt.options.build.transpile = nuxt.options.build.transpile.map(t => typeof t === 'string' ? normalize(t) : t)
+  nuxt.options.build.transpile = nuxt.options.build.transpile.map((t) => {
+    if (typeof t !== 'string') {
+      return t
+    }
+    // Normalize windows transpile paths added by modules
+    return normalize(t).split('node_modules/').pop()!
+  })
 
-  addModuleTranspiles()
+  addModuleTranspiles(nuxt)
 
   // Init nitro
   await initNitro(nuxt)
@@ -820,11 +827,15 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
 
   // Add core modules
   options._modules.push(pagesModule, metaModule, componentsModule)
+  const importIncludes: RegExp[] = []
+  for (const layer of options._layers) {
+    if (layer.cwd && layer.cwd.includes('node_modules')) {
+      importIncludes.push(new RegExp(`(^|\\/)${escapeRE(layer.cwd.split('node_modules/').pop()!)}(\\/|$)(?!node_modules\\/)`))
+    }
+  }
   options._modules.push([importsModule, {
     transform: {
-      include: options._layers
-        .filter(i => i.cwd && i.cwd.includes('node_modules'))
-        .map(i => new RegExp(`(^|\\/)${escapeRE(i.cwd!.split('node_modules/').pop()!)}(\\/|$)(?!node_modules\\/)`)),
+      include: importIncludes,
     },
   }])
   options._modules.push(schemaModule)

packages/nuxt/src/core/runtime/nitro/handlers/renderer.ts

@@ -328,7 +328,14 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
 })
 
 function normalizeChunks (chunks: (string | undefined)[]) {
-  return chunks.filter(Boolean).map(i => i!.trim())
+  const result: string[] = []
+  for (const _chunk of chunks) {
+    const chunk = _chunk?.trim()
+    if (chunk) {
+      result.push(chunk)
+    }
+  }
+  return result
 }
 
 function joinTags (tags: Array<string | undefined>) {