fix(vite): separate dynamic deps in dev-bundler (#2067)

examples/with-components/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <hello-world />
+    <lazy-hello-world />
     <nuxt3 />
   </div>
 </template>

examples/with-components/components/HelloWorld.vue

@@ -1,5 +1,11 @@
 <template>
-  <div>
+  <div class="hello">
     This is HelloWorld component!
   </div>
 </template>
+
+<style scoped>
+.hello {
+  color: red;
+}
+</style>

examples/with-components/components/Nuxt3.vue

@@ -1,5 +1,11 @@
 <template>
-  <b style="color: #00C58E">
+  <b class="nuxt3">
     From Nuxt 3
   </b>
 </template>
+
+<style scoped>
+.nuxt3 {
+  color: #00C58E;
+}
+</style>

examples/with-components/nuxt.config.ts

@@ -1,7 +1,6 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
-  vite: false,
   components: {
     dirs: [
       '~/components',

packages/bridge/src/vite/server.ts

@@ -102,9 +102,9 @@ export async function buildServer (ctx: ViteBuildContext) {
   // Build and watch
   const _doBuild = async () => {
     const start = Date.now()
-    const { code, ids } = await bundleRequest({ viteServer }, '/.nuxt/server.js')
+    const { code, chunks } = await bundleRequest({ viteServer }, '/.nuxt/server.js')
     // Have CSS in the manifest to prevent FOUC on dev SSR
-    await generateDevSSRManifest(ctx, ids.filter(isCSS).map(i => '../' + i.slice(1)))
+    await generateDevSSRManifest(ctx, chunks.filter(i => !i.isDynamic && isCSS(i.id)).map(i => '../' + i.id.slice(1)))
     await fse.writeFile(resolve(ctx.nuxt.options.buildDir, 'dist/server/server.mjs'), code, 'utf-8')
     const time = (Date.now() - start)
     consola.info(`Server built in ${time}ms`)

packages/vite/src/dev-bundler.ts

@@ -3,13 +3,15 @@ import { existsSync } from 'fs'
 import { resolve } from 'pathe'
 import * as vite from 'vite'
 import { ExternalsOptions, isExternal as _isExternal, ExternalsDefaults } from 'externality'
-import { hashId, uniq } from './utils'
+import { hashId } from './utils'
 
 export interface TransformChunk {
   id: string,
   code: string,
   deps: string[],
   parents: string[]
+  dynamicDeps: string[],
+  isDynamic: boolean,
 }
 
 export interface SSRTransformResult {
@@ -91,22 +93,42 @@ ${res.code || '/* empty */'};
   return { code, deps: res.deps || [], dynamicDeps: res.dynamicDeps || [] }
 }
 
-async function transformRequestRecursive (opts: TransformOptions, id, parent = '<entry>', chunks: Record<string, TransformChunk> = {}) {
+function markChunkAsSync (chunk: TransformChunk, chunks: Record<string, TransformChunk>) {
+  if (!chunk.isDynamic) {
+    return
+  }
+  chunk.isDynamic = false
+  for (const id of chunk.deps) {
     if (chunks[id]) {
+      markChunkAsSync(chunks[id], chunks)
+    }
+  }
+}
+
+async function transformRequestRecursive (opts: TransformOptions, id: string, parent = '<entry>', chunks: Record<string, TransformChunk> = {}, isDynamic = false) {
+  if (chunks[id]) {
+    if (!isDynamic) {
+      // chunks that been imported as both dynamic and sync
+      markChunkAsSync(chunks[id], chunks)
+    }
     chunks[id].parents.push(parent)
     return
   }
   const res = await transformRequest(opts, id)
-  const deps = uniq([...res.deps, ...res.dynamicDeps])
 
-  chunks[id] = {
+  chunks[id] = <TransformChunk>{
     id,
     code: res.code,
-    deps,
+    deps: res.deps,
+    dynamicDeps: res.dynamicDeps,
+    isDynamic,
     parents: [parent]
-  } as TransformChunk
-  for (const dep of deps) {
-    await transformRequestRecursive(opts, dep, id, chunks)
+  }
+  for (const dep of res.deps) {
+    await transformRequestRecursive(opts, dep, id, chunks, isDynamic)
+  }
+  for (const dep of res.dynamicDeps) {
+    await transformRequestRecursive(opts, dep, id, chunks, true)
   }
   return Object.values(chunks)
 }
@@ -211,6 +233,6 @@ async function __instantiateModule__(url, urlStack) {
 
   return {
     code,
-    ids: chunks.map(i => i.id)
+    chunks
   }
 }

packages/vite/src/server.ts

@@ -106,10 +106,10 @@ export async function buildServer (ctx: ViteBuildContext) {
   // Build and watch
   const _doBuild = async () => {
     const start = Date.now()
-    const { code, ids } = await bundleRequest({ viteServer }, resolve(ctx.nuxt.options.appDir, 'entry'))
+    const { code, chunks } = await bundleRequest({ viteServer }, resolve(ctx.nuxt.options.appDir, 'entry'))
     await fse.writeFile(resolve(ctx.nuxt.options.buildDir, 'dist/server/server.mjs'), code, 'utf-8')
     // Have CSS in the manifest to prevent FOUC on dev SSR
-    await writeManifest(ctx, ids.filter(isCSS).map(i => i.slice(1)))
+    await writeManifest(ctx, chunks.filter(i => !i.isDynamic && isCSS(i.id)).map(i => i.id.slice(1)))
     const time = (Date.now() - start)
     consola.success(`Vite server built in ${time}ms`)
     await onBuild()