perf(vite): exclude common ESM deps from pre-bundling (#27372)

packages/nuxt/src/pages/module.ts

@@ -422,11 +422,6 @@ export default defineNuxtModule({
       getContents: () => 'export { START_LOCATION, useRoute } from \'vue-router\'',
     })
 
-    // Optimize vue-router to ensure we share the same injection symbol
-    nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {}
-    nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || []
-    nuxt.options.vite.optimizeDeps.include.push('vue-router')
-
     nuxt.options.vite.resolve = nuxt.options.vite.resolve || {}
     nuxt.options.vite.resolve.dedupe = nuxt.options.vite.resolve.dedupe || []
     nuxt.options.vite.resolve.dedupe.push('vue-router')

packages/vite/src/client.ts

@@ -63,6 +63,48 @@ export async function buildClient (ctx: ViteBuildContext) {
     },
     optimizeDeps: {
       entries: [ctx.entry],
+      include: [],
+      // We exclude Vue and Nuxt common dependencies from optimization
+      // as they already ship ESM.
+      //
+      // This will help to reduce the chance for users to encounter
+      // common chunk conflicts that causing browser reloads.
+      // We should also encourage module authors to add their deps to
+      // `exclude` if they ships bundled ESM.
+      //
+      // Also since `exclude` is inert, it's safe to always include
+      // all possible deps even if they are not used yet.
+      //
+      // @see https://github.com/antfu/nuxt-better-optimize-deps#how-it-works
+      exclude: [
+        // Vue
+        'vue',
+        '@vue/runtime-core',
+        '@vue/runtime-dom',
+        '@vue/reactivity',
+        '@vue/shared',
+        '@vue/devtools-api',
+        'vue-router',
+        'vue-demi',
+
+        // Nuxt
+        'nuxt',
+        'nuxt/app',
+
+        // Nuxt Deps
+        '@unhead/vue',
+        'consola',
+        'defu',
+        'devalue',
+        'h3',
+        'hookable',
+        'klona',
+        'ofetch',
+        'pathe',
+        'ufo',
+        'unctx',
+        'unenv',
+      ],
     },
     resolve: {
       alias: {
@@ -162,6 +204,10 @@ export async function buildClient (ctx: ViteBuildContext) {
 
   await ctx.nuxt.callHook('vite:configResolved', clientConfig, { isClient: true, isServer: false })
 
+  // Prioritize `optimizeDeps.exclude`. If same dep is in `include` and `exclude`, remove it from `include`
+  clientConfig.optimizeDeps!.include = clientConfig.optimizeDeps!.include!
+    .filter(dep => !clientConfig.optimizeDeps!.exclude!.includes(dep))
+
   if (ctx.nuxt.options.dev) {
     // Dev
     const viteServer = await vite.createServer(clientConfig)

packages/vite/src/vite.ts

@@ -71,10 +71,6 @@ export const bundle: NuxtBuilder['bundle'] = async (nuxt) => {
             'abort-controller': 'unenv/runtime/mock/empty',
           },
         },
-        optimizeDeps: {
-          include: ['vue'],
-          exclude: ['nuxt/app'],
-        },
         css: resolveCSSOptions(nuxt),
         define: {
           __NUXT_VERSION__: JSON.stringify(nuxt._version),