From a149225e6362c3ca90f017671e97898b0697417d Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Tue, 23 Nov 2021 01:39:56 +0800 Subject: [PATCH] fix(vite): separate dynamic deps in dev-bundler (#2067) --- examples/with-components/app.vue | 2 +- .../with-components/components/HelloWorld.vue | 8 +++- examples/with-components/components/Nuxt3.vue | 8 +++- examples/with-components/nuxt.config.ts | 1 - packages/bridge/src/vite/server.ts | 4 +- packages/vite/src/dev-bundler.ts | 40 ++++++++++++++----- packages/vite/src/server.ts | 4 +- 7 files changed, 50 insertions(+), 17 deletions(-) diff --git a/examples/with-components/app.vue b/examples/with-components/app.vue index 96d95aad4a..a8507940af 100644 --- a/examples/with-components/app.vue +++ b/examples/with-components/app.vue @@ -1,6 +1,6 @@ diff --git a/examples/with-components/components/HelloWorld.vue b/examples/with-components/components/HelloWorld.vue index 92f324eb3e..2e97161046 100644 --- a/examples/with-components/components/HelloWorld.vue +++ b/examples/with-components/components/HelloWorld.vue @@ -1,5 +1,11 @@ + + diff --git a/examples/with-components/components/Nuxt3.vue b/examples/with-components/components/Nuxt3.vue index 0faa5c7efe..06cd2bdbaf 100644 --- a/examples/with-components/components/Nuxt3.vue +++ b/examples/with-components/components/Nuxt3.vue @@ -1,5 +1,11 @@ + + diff --git a/examples/with-components/nuxt.config.ts b/examples/with-components/nuxt.config.ts index 01b4f600a9..fd128c92c2 100644 --- a/examples/with-components/nuxt.config.ts +++ b/examples/with-components/nuxt.config.ts @@ -1,7 +1,6 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ - vite: false, components: { dirs: [ '~/components', diff --git a/packages/bridge/src/vite/server.ts b/packages/bridge/src/vite/server.ts index a91a265d69..0b43382997 100644 --- a/packages/bridge/src/vite/server.ts +++ b/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`) diff --git a/packages/vite/src/dev-bundler.ts b/packages/vite/src/dev-bundler.ts index 9c4379c817..437cb775a9 100644 --- a/packages/vite/src/dev-bundler.ts +++ b/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 = '', chunks: Record = {}) { +function markChunkAsSync (chunk: TransformChunk, chunks: Record) { + 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 = '', chunks: Record = {}, 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] = { 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 } } diff --git a/packages/vite/src/server.ts b/packages/vite/src/server.ts index 5b493e628a..d327f829e4 100644 --- a/packages/vite/src/server.ts +++ b/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()