fix(vite): include dynamic css (revert #2067) (#2227)

This commit is contained in:
Anthony Fu 2021-11-30 22:37:01 +08:00 committed by GitHub
parent be1d8ff005
commit 29a2eb3dc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 17 additions and 50 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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