perf(nuxt): reduce unnecessary template updating (#30684)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

packages/nuxt/src/components/module.ts

@@ -1,6 +1,6 @@
 import { existsSync, statSync, writeFileSync } from 'node:fs'
 import { isAbsolute, join, normalize, relative, resolve } from 'pathe'
-import { addBuildPlugin, addPluginTemplate, addTemplate, addTypeTemplate, addVitePlugin, defineNuxtModule, findPath, resolveAlias, resolvePath, updateTemplates } from '@nuxt/kit'
+import { addBuildPlugin, addPluginTemplate, addTemplate, addTypeTemplate, addVitePlugin, defineNuxtModule, findPath, resolveAlias, resolvePath } from '@nuxt/kit'
 import type { Component, ComponentsDir, ComponentsOptions } from 'nuxt/schema'
 
 import { distDir } from '../dirs'
@@ -198,24 +198,6 @@ export default defineNuxtModule<ComponentsOptions>({
       tsConfig.compilerOptions!.paths['#components'] = [resolve(nuxt.options.buildDir, 'components')]
     })
 
-    // Watch for changes
-    nuxt.hook('builder:watch', async (event, relativePath) => {
-      if (!['add', 'unlink'].includes(event)) {
-        return
-      }
-      const path = resolve(nuxt.options.srcDir, relativePath)
-      if (componentDirs.some(dir => path.startsWith(dir.path + '/'))) {
-        await updateTemplates({
-          filter: template => [
-            'components.plugin.mjs',
-            'components.d.ts',
-            'components.server.mjs',
-            'components.client.mjs',
-          ].includes(template.filename),
-        })
-      }
-    })
-
     addBuildPlugin(TreeShakeTemplatePlugin({ sourcemap: !!nuxt.options.sourcemap.server, getComponents }), { client: false })
 
     const sharedLoaderOptions = {

packages/nuxt/src/pages/module.ts

@@ -1,6 +1,6 @@
 import { existsSync, readdirSync } from 'node:fs'
 import { mkdir, readFile } from 'node:fs/promises'
-import { addBuildPlugin, addComponent, addPlugin, addTemplate, addTypeTemplate, defineNuxtModule, findPath, resolvePath, updateTemplates, useNitro } from '@nuxt/kit'
+import { addBuildPlugin, addComponent, addPlugin, addTemplate, addTypeTemplate, defineNuxtModule, findPath, resolvePath, useNitro } from '@nuxt/kit'
 import { dirname, join, relative, resolve } from 'pathe'
 import { genImport, genObjectFromRawEntries, genString } from 'knitwork'
 import { joinURL } from 'ufo'
@@ -93,10 +93,8 @@ export default defineNuxtModule({
       addPlugin(resolve(runtimeDir, 'plugins/check-if-page-unused'))
     }
 
-    nuxt.hook('app:templates', async (app) => {
+    nuxt.hook('app:templates', (app) => {
-      app.pages = await resolvePagesRoutes(nuxt)
+      if (!nuxt.options.ssr && app.pages?.some(p => p.mode === 'server')) {
-
-      if (!nuxt.options.ssr && app.pages.some(p => p.mode === 'server')) {
         logger.warn('Using server pages with `ssr: false` is not supported with auto-detected component islands. Set `experimental.componentIslands` to `true`.')
       }
     })
@@ -269,6 +267,13 @@ export default defineNuxtModule({
       if (!pages) { return false }
       return pages.some(page => page.file === file) || pages.some(page => page.children && isPage(file, page.children))
     }
+
+    nuxt.hooks.hookOnce('app:templates', async (app) => {
+      if (!app.pages) {
+        app.pages = await resolvePagesRoutes(nuxt)
+      }
+    })
+
     nuxt.hook('builder:watch', async (event, relativePath) => {
       const path = resolve(nuxt.options.srcDir, relativePath)
       const shouldAlwaysRegenerate = nuxt.options.experimental.scanPageMeta && isPage(path)
@@ -276,9 +281,7 @@ export default defineNuxtModule({
       if (event === 'change' && !shouldAlwaysRegenerate) { return }
 
       if (shouldAlwaysRegenerate || updateTemplatePaths.some(dir => path.startsWith(dir))) {
-        await updateTemplates({
+        nuxt.apps.default!.pages = await resolvePagesRoutes(nuxt)
-          filter: template => template.filename === 'routes.mjs',
-        })
       }
     })
 

test/bundle.test.ts

@@ -127,7 +127,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
     const serverDir = join(pagesRootDir, '.output/server')
 
     const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot(`"302k"`)
+    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot(`"303k"`)
 
     const modules = await analyzeSizes(['node_modules/**/*'], serverDir)
     expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot(`"1398k"`)