perf: performance overhaul

packages/nuxt/src/app/components/nuxt-error-page.vue

@@ -13,23 +13,21 @@ const props = defineProps({
 const _error = props.error
 
 // TODO: extract to a separate utility
-const stacktrace = _error.stack
- ? _error.stack
- .split('\n')
- .splice(1)
- .map((line) => {
- const text = line
- .replace('webpack:/', '')
- .replace('.vue', '.js') // TODO: Support sourcemap
- .trim()
- return {
- text,
- internal: (line.includes('node_modules') && !line.includes('.cache')) ||
- line.includes('internal') ||
- line.includes('new Promise'),
- }
- }).map(i => `<span class="stack${i.internal ? ' internal' : ''}">${i.text}</span>`).join('\n')
- : ''
+let stacktrace = []
+if (_error.stack) {
+ const stackArray = _error.stack.split('\n').splice(1)
+ for (const stk of stackArray) {
+ const text = stk
+ .replace('webpack:/', '')
+ .replace('.vue', '.js') // TODO: Support sourcemap
+ .trim()
+ const internal = (text.includes('node_modules') && !text.includes('.cache')) ||
+ text.includes('internal') ||
+ text.includes('new Promise')
+ stacktrace.push(`<span class="stack${internal ? ' internal' : ''}">${text}</span>`)
+ }
+ stacktrace = stacktrace.join("\n")
+}
 
 // Error page props
 const statusCode = Number(_error.statusCode || 500)

packages/nuxt/src/app/components/nuxt-island.ts

@@ -131,8 +131,9 @@ export default defineComponent({
  const currentSlots = Object.keys(slots)
  let html = ssrHTML.value
 
- if (import.meta.client && !canLoadClientComponent.value) {
- for (const [key, value] of Object.entries(payloads.components || {})) {
+ if (import.meta.client && !canLoadClientComponent.value && payloads.components) {
+ for (const key in payloads.components) {
+ const value = payloads.components[key]
  html = html.replace(new RegExp(` data-island-uid="${uid.value}" data-island-component="${key}"[^>]*>`), (full) => {
  return full + value.html
  })
@@ -266,21 +267,21 @@ export default defineComponent({
  }
  }
  if (selectiveClient) {
- if (import.meta.server) {
- if (payloads.components) {
- for (const [id, info] of Object.entries(payloads.components)) {
- const { html, slots } = info
- let replaced = html.replaceAll('data-island-uid', `data-island-uid="${uid.value}"`)
- for (const slot in slots) {
- replaced = replaced.replaceAll(`data-island-slot="${slot}">`, full => full + slots[slot])
- }
- teleports.push(createVNode(Teleport, { to: `uid=${uid.value};client=${id}` }, {
- default: () => [createStaticVNode(replaced, 1)],
- }))
+ if (import.meta.server && payloads.components) {
+ for (const id in payloads.components) {
+ const info = payloads.components[id]
+ const { html, slots } = info
+ let replaced = html.replaceAll('data-island-uid', `data-island-uid="${uid.value}"`)
+ for (const slot in slots) {
+ replaced = replaced.replaceAll(`data-island-slot="${slot}">`, full => full + slots[slot])
  }
+ teleports.push(createVNode(Teleport, { to: `uid=${uid.value};client=${id}` }, {
+ default: () => [createStaticVNode(replaced, 1)],
+ }))
  }
  } else if (canLoadClientComponent.value && payloads.components) {
- for (const [id, info] of Object.entries(payloads.components)) {
+ for (const id in payloads.components) {
+ const info = payloads.components[id]
  const { props, slots } = info
  const component = components!.get(id)!
  // use different selectors for even and odd teleportKey to force trigger the teleport

packages/nuxt/src/app/components/route-provider.ts

@@ -36,7 +36,8 @@ export const RouteProvider = defineComponent({
  if (import.meta.dev && import.meta.client && props.trackRootNodes) {
  onMounted(() => {
  nextTick(() => {
- if (['#comment', '#text'].includes(vnode?.el?.nodeName)) {
+ const nodeName = vnode?.el?.nodeName
+ if (nodeName === '#comment' || nodeName === '#text') {
  const filename = (vnode?.type as any).__file
  console.warn(`[nuxt] \`${filename}\` does not have a single root node and will cause errors when navigating between routes.`)
  }

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

@@ -15,7 +15,7 @@ async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<str
  const vm = getCurrentInstance()!
  const { fetchKey, _fetchKeyBase } = vm.proxy!.$options
  const key = (typeof fetchKey === 'function' ? fetchKey(() => '') : fetchKey) ||
- ([_fetchKeyBase, route.fullPath, route.matched.findIndex(r => Object.values(r.components || {}).includes(vm.type))].join(':'))
+ `${_fetchKeyBase}:${route.fullPath}:${route.matched.findIndex(r => Object.values(r.components || {}).includes(vm.type))}`
  const { data, error } = await useAsyncData(`options:asyncdata:${key}`, () => nuxtApp.runWithContext(() => fn(nuxtApp)))
  if (error.value) {
  throw createError(error.value)

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

@@ -247,7 +247,8 @@ function generateOptionSegments<_ResT, DataT, DefaultT> (opts: UseFetchOptions<_
  if (!obj) { continue }
 
  const unwrapped: Record<string, string> = {}
- for (const [key, value] of Object.entries(obj)) {
+ for (const key in obj) {
+ const value = obj[key]
  unwrapped[toValue(key)] = toValue(value)
  }
  segments.push(unwrapped)

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

@@ -54,9 +54,13 @@ 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')
+ const components = []
+ for (const component of matched) {
+ const defComponent = component.components?.default
+ if (typeof defComponent === 'function') {
+ components.push(defComponent)
+ }
+ }
 
  for (const component of components) {
  const promise = Promise.resolve((component as Function)())

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

@@ -126,12 +126,15 @@ 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(', ')
+ let features = []
+ for (const feature in windowFeatures) {
+ const value = windowFeatures[feature as keyof typeof 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/composables/state.ts

@@ -44,7 +44,7 @@ export function clearNuxtState (
 ): void {
  const nuxtApp = useNuxtApp()
  const _allKeys = Object.keys(nuxtApp.payload.state)
- .map(key => key.substring(useStateKeyPrefix.length))
+ .map(key => key.substring(2))
 
  const _keys: string[] = !keys
  ? _allKeys

packages/nuxt/src/components/client-fallback-auto-id.ts

@@ -20,10 +20,10 @@ export const clientFallbackAutoIdPlugin = createUnplugin((options: LoaderOptions
  name: 'nuxt:client-fallback-auto-id',
  enforce: 'pre',
  transformInclude (id) {
- if (exclude.some(pattern => pattern.test(id))) {
+ if (exclude.length && exclude.some(pattern => pattern.test(id))) {
  return false
  }
- if (include.some(pattern => pattern.test(id))) {
+ if (include.length && include.some(pattern => pattern.test(id))) {
  return true
  }
  return isVue(id)

packages/nuxt/src/components/islandsTransform.ts

@@ -155,7 +155,14 @@ 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(',')
+ let content: string | string[] = []
+ for (const b in bindings) {
+ if (b && (b !== '_bind' && b !== 'v-for')) {
+ const value = bindings[b]
+ content.push(isBinding(b) ? `[\`${b.slice(1)}\`]: ${value}` : `[\`${b}\`]: \`${value}\``)
+ }
+ }
+ content = content.join(',')
  const data = bindings._bind ? `mergeProps(${bindings._bind}, { ${content} })` : `{ ${content} }`
  if (!vfor) {
  return `[${data}]`
@@ -199,7 +206,8 @@ export const componentsChunkPlugin = createUnplugin((options: ComponentChunkOpti
  async generateBundle (_opts, bundle) {
  const components = options.getComponents().filter(c => c.mode === 'client' || c.mode === 'all')
  const pathAssociation: Record<string, string> = {}
- for (const [chunkPath, chunkInfo] of Object.entries(bundle)) {
+ for (const chunkPath in bundle) {
+ const chunkInfo = bundle[chunkPath]
  if (chunkInfo.type !== 'chunk') { continue }
 
  for (const component of components) {

packages/nuxt/src/components/module.ts

@@ -61,12 +61,18 @@ export default defineNuxtModule<ComponentsOptions>({
  if (!dir) {
  return []
  }
- const dirs: ComponentsDir[] = (dir.dirs || [dir]).map((dir: any): ComponentsDir => typeof dir === 'string' ? { path: dir } : dir).filter((_dir: ComponentsDir) => _dir.path)
- return dirs.map(_dir => ({
- priority: options?.priority || 0,
- ..._dir,
- path: resolve(cwd, resolveAlias(_dir.path)),
- }))
+ const dirs: ComponentsDir[] = []
+ for (const compDir of dir.dirs || [dir]) {
+ const _dir: ComponentsDir = typeof dir === 'string' ? { path: compDir } : compDir
+ if (_dir.path) {
+ dirs.push({
+ priority: options?.priority || 0,
+ ..._dir,
+ path: resolve(cwd, resolveAlias(_dir.path))
+ })
+ }
+ }
+ return dirs
  }
 
  // Resolve dirs
@@ -106,12 +112,19 @@ export default defineNuxtModule<ComponentsOptions>({
  }
  }).filter(d => d.enabled)
 
- componentDirs = [
- ...componentDirs.filter(dir => !dir.path.includes('node_modules')),
- ...componentDirs.filter(dir => dir.path.includes('node_modules')),
- ]
+ const nodeComponents = []
+ const noNodeComponents = []
+ for (const dir of componentDirs) {
+ if (dir.transpile) {
+ if (dir.path.includes('node_modules')) {
+ nodeComponents.push(dir.path)
+ } else {
+ noNodeComponents.push(dir.path)
+ }
+ }
+ }
 
- nuxt.options.build!.transpile!.push(...componentDirs.filter(dir => dir.transpile).map(dir => dir.path))
+ nuxt.options.build!.transpile!.push(...noNodeComponents, ...nodeComponents)
  })
 
  // components.d.ts
@@ -142,7 +155,13 @@ export default defineNuxtModule<ComponentsOptions>({
 
  // Do not prefetch global components chunks
  nuxt.hook('build:manifest', (manifest) => {
- const sourceFiles = getComponents().filter(c => c.global).map(c => relative(nuxt.options.srcDir, c.filePath))
+ const comps = getComponents()
+ const sourceFiles: string[] = []
+ for (const c of comps) {
+ if (c.global) {
+ sourceFiles.push(relative(nuxt.options.srcDir, c.filePath))
+ }
+ }
 
  for (const key in manifest) {
  if (manifest[key].isEntry) {
@@ -154,7 +173,7 @@ export default defineNuxtModule<ComponentsOptions>({
 
  // Restart dev server when component directories are added/removed
  nuxt.hook('builder:watch', (event, relativePath) => {
- if (!['addDir', 'unlinkDir'].includes(event)) {
+ if (event !== 'addDir' && event !== 'unlinkDir') {
  return
  }
 
@@ -196,7 +215,7 @@ export default defineNuxtModule<ComponentsOptions>({
 
  // Watch for changes
  nuxt.hook('builder:watch', async (event, relativePath) => {
- if (!['add', 'unlink'].includes(event)) {
+ if (event !== 'add' && event !== 'unlink') {
  return
  }
  const path = resolve(nuxt.options.srcDir, relativePath)
@@ -247,13 +266,20 @@ export default defineNuxtModule<ComponentsOptions>({
  buildDir: nuxt.options.buildDir,
  }))
  } else {
- fs.writeFileSync(join(nuxt.options.buildDir, 'components-chunk.mjs'), `export const paths = ${JSON.stringify(
- getComponents().filter(c => c.mode === 'client' || c.mode === 'all').reduce((acc, c) => {
- if (c.filePath.endsWith('.vue') || c.filePath.endsWith('.js') || c.filePath.endsWith('.ts')) { return Object.assign(acc, { [c.pascalName]: `/@fs/${c.filePath}` }) }
- const filePath = fs.existsSync(`${c.filePath}.vue`) ? `${c.filePath}.vue` : fs.existsSync(`${c.filePath}.js`) ? `${c.filePath}.js` : `${c.filePath}.ts`
- return Object.assign(acc, { [c.pascalName]: `/@fs/${filePath}` })
- }, {} as Record<string, string>),
- )}`)
+ const comps = getComponents()
+ const compObj: Record<string, string> = {}
+ for (const c of comps) {
+ if (c.mode === 'client' || c.mode === 'all') {
+ let filePath = c.filePath
+ if (filePath.endsWith('.vue') || filePath.endsWith('.js') || filePath.endsWith('.ts')) {
+ Object.assign(compObj, { [c.pascalName]: `/@fs/${filePath}` })
+ continue
+ }
+ filePath = fs.existsSync(`${filePath}.vue`) ? `${filePath}.vue` : fs.existsSync(`${filePath}.js`) ? `${filePath}.js` : `${filePath}.ts`
+ Object.assign(compObj, { [c.pascalName]: `/@fs/${filePath}` })
+ }
+ }
+ fs.writeFileSync(join(nuxt.options.buildDir, 'components-chunk.mjs'), `export const paths = ${JSON.stringify(compObj)}`)
  }
  }
 

packages/nuxt/src/components/scan.ts

@@ -134,7 +134,7 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
  continue
  }
 
- const existingComponent = components.find(c => c.pascalName === component.pascalName && ['all', component.mode].includes(c.mode))
+ const existingComponent = components.find(c => c.pascalName === component.pascalName && (c.mode === 'all' || c.mode === component.mode))
  // Ignore component if component is already defined (with same mode)
  if (existingComponent) {
  const existingPriority = existingComponent.priority ?? 0