fix(bridge): fix fouc on vite (#1515)

This commit is contained in:
Anthony Fu 2021-10-27 19:35:06 +08:00 committed by GitHub
parent cf99fd2862
commit 0f329ea871
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 10 deletions

View File

@ -129,16 +129,11 @@ export async function stubManifest (ctx: ViteBuildContext) {
await writeServerManifest(serverManifest, ctx.nuxt.options.buildDir) await writeServerManifest(serverManifest, ctx.nuxt.options.buildDir)
} }
export async function generateDevSSRManifest (ctx: ViteBuildContext) { export async function generateDevSSRManifest (ctx: ViteBuildContext, extraEntries: string[] = []) {
const rDist = (...args: string[]): string => resolve(ctx.nuxt.options.buildDir, 'dist', ...args)
const ssrManifest = await fse.readJSON(rDist('server/ssr-manifest.json'))
const css = Object.keys(ssrManifest).filter(isCSS)
const entires = [ const entires = [
'@vite/client', '@vite/client',
'entry.mjs', 'entry.mjs',
...css.map(i => `../${i}`) ...extraEntries
] ]
const clientManifest = { const clientManifest = {

View File

@ -9,6 +9,7 @@ import { ViteBuildContext, ViteOptions } from './types'
import { wpfs } from './utils/wpfs' import { wpfs } from './utils/wpfs'
import { jsxPlugin } from './plugins/jsx' import { jsxPlugin } from './plugins/jsx'
import { generateDevSSRManifest } from './manifest' import { generateDevSSRManifest } from './manifest'
import { isCSS } from './utils'
export async function buildServer (ctx: ViteBuildContext) { export async function buildServer (ctx: ViteBuildContext) {
// Workaround to disable HMR // Workaround to disable HMR
@ -101,7 +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 } = 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
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

@ -2,7 +2,7 @@ import fse from 'fs-extra'
import { resolve } from 'pathe' import { resolve } from 'pathe'
import type { ViteBuildContext } from './vite' import type { ViteBuildContext } from './vite'
export async function writeManifest (ctx: ViteBuildContext, extracEntries: string[] = []) { export async function writeManifest (ctx: ViteBuildContext, extraEntries: string[] = []) {
// Write client manifest for use in vue-bundle-renderer // Write client manifest for use in vue-bundle-renderer
const clientDist = resolve(ctx.nuxt.options.buildDir, 'dist/client') const clientDist = resolve(ctx.nuxt.options.buildDir, 'dist/client')
const serverDist = resolve(ctx.nuxt.options.buildDir, 'dist/server') const serverDist = resolve(ctx.nuxt.options.buildDir, 'dist/server')
@ -10,7 +10,7 @@ export async function writeManifest (ctx: ViteBuildContext, extracEntries: strin
const entries = [ const entries = [
'@vite/client', '@vite/client',
'entry.mjs', 'entry.mjs',
...extracEntries ...extraEntries
] ]
// Legacy dev manifest // Legacy dev manifest