feat: ssr manifest for preload inference

Author: yyx990803

packages/plugin-vue/src/main.ts

@@ -95,7 +95,7 @@ export async function transformMain(
       `_sfc_main.__scopeId = ${JSON.stringify(`data-v-${descriptor.id}`)}`
     )
   }
-  if (devServer) {
+  if (devServer && !isProduction) {
     // expose filename during serve for devtools to pickup
     output.push(`_sfc_main.__file = ${JSON.stringify(filename)}`)
   }
@@ -122,6 +122,21 @@ export async function transformMain(
     )
   }
 
+  // SSR module registration by wrapping user setup
+  if (ssr) {
+    output.push(
+      `import { useSSRContext } from 'vue'`,
+      `const _sfc_setup = _sfc_main.setup`,
+      `_sfc_main.setup = (props, ctx) => {`,
+      `  const ssrContext = useSSRContext()`,
+      `  ;(ssrContext.modules || (ssrContext.modules = new Set())).add(${JSON.stringify(
+        filename
+      )})`,
+      `  return _sfc_setup ? _sfc_setup(props, ctx) : undefined`,
+      `}`
+    )
+  }
+
   // if the template is inlined into the main module (indicated by the presence
   // of templateMap, we need to concatenate the two source maps.
   let resolvedMap = map

packages/vite/src/node/build.ts

@@ -29,6 +29,7 @@ import { CleanCSS } from 'types/clean-css'
 import { dataURIPlugin } from './plugins/dataUri'
 import { buildImportAnalysisPlugin } from './plugins/importAnaysisBuild'
 import { resolveSSRExternal } from './ssr/ssrExternal'
+import { ssrManifestPlugin } from './ssr/ssrManifestPlugin'
 
 export interface BuildOptions {
   /**
@@ -148,9 +149,15 @@ export interface BuildOptions {
    */
   lib?: LibraryOptions | false
   /**
-   * @internal for now
+   * Produce SSR oriented build. Note this requires specifying SSR entry via
+   * `rollupOptions.input`.
    */
   ssr?: boolean
+  /**
+   * Generate SSR manifest for determining style links and asset preload
+   * directives in production.
+   */
+  ssrManifest?: boolean
 }
 
 export interface LibraryOptions {
@@ -187,6 +194,7 @@ export function resolveBuildOptions(
     manifest: false,
     lib: false,
     ssr: false,
+    ssrManifest: false,
     ...raw
   }
 
@@ -233,6 +241,7 @@ export function resolveBuildPlugins(
         ? [terserPlugin(options.terserOptions)]
         : []),
       ...(options.manifest ? [manifestPlugin()] : []),
+      ...(options.ssrManifest ? [ssrManifestPlugin(config)] : []),
       ...(!config.logLevel || config.logLevel === 'info'
         ? [buildReporterPlugin(config)]
         : [])
@@ -272,13 +281,15 @@ async function doBuild(
   inlineConfig: InlineConfig = {}
 ): Promise<RollupOutput | RollupOutput[]> {
   const config = await resolveConfig(inlineConfig, 'build', 'production')
-  config.logger.info(chalk.cyan(`building for ${config.mode}...`))
-
   const options = config.build
   const ssr = !!options.ssr
   const libOptions = options.lib
-  const resolve = (p: string) => path.resolve(config.root, p)
 
+  config.logger.info(
+    chalk.cyan(`building ${ssr ? `SSR bundle ` : ``}for ${config.mode}...`)
+  )
+
+  const resolve = (p: string) => path.resolve(config.root, p)
   const input = libOptions
     ? libOptions.entry
     : options.rollupOptions?.input || resolve('index.html')
@@ -351,6 +362,7 @@ async function doBuild(
         // #764 add `Symbol.toStringTag` when build es module into cjs chunk
         // #1048 add `Symbol.toStringTag` for module default export
         namespaceToStringTag: true,
+        inlineDynamicImports: ssr && typeof input === 'string',
         ...output
       })
     }

packages/vite/src/node/cli.ts

@@ -120,6 +120,7 @@ cli
       `or specify minifier to use (default: terser)`
   )
   .option('--manifest', `[boolean] emit build manifest json`)
+  .option('--ssrManifest', `[boolean] emit ssr manifest json`)
   .option(
     '--emptyOutDir',
     `[boolean] force empty outDir when it's outside of root`

packages/vite/src/node/plugins/asset.ts

@@ -80,7 +80,10 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       // do not emit assets for SSR build
       if (config.command === 'build' && config.build.ssr) {
         for (const file in bundle) {
-          if (bundle[file].type === 'asset') {
+          if (
+            bundle[file].type === 'asset' &&
+            !file.includes('ssr-manifest.json')
+          ) {
             delete bundle[file]
           }
         }

packages/vite/src/node/plugins/manifest.ts

@@ -1,7 +1,13 @@
 import { Plugin } from '../plugin'
 
 export function manifestPlugin(): Plugin {
-  const manifest: Record<string, { file: string; imports?: string[] }> = {}
+  const manifest: Record<
+    string,
+    {
+      file: string
+      imports?: string[]
+    }
+  > = {}
 
   return {
     name: 'vite:manifest',

packages/vite/src/node/ssr/ssrManifestPlugin.ts

@@ -0,0 +1,38 @@
+import { ResolvedConfig } from '..'
+import { Plugin } from '../plugin'
+import { chunkToEmittedCssFileMap } from '../plugins/css'
+
+export function ssrManifestPlugin(config: ResolvedConfig): Plugin {
+  // module id => preload assets mapping
+  const ssrManifest: Record<string, string[]> = {}
+  const base = config.build.base
+
+  return {
+    name: 'vite:manifest',
+    generateBundle(_options, bundle) {
+      for (const file in bundle) {
+        const chunk = bundle[file]
+        if (chunk.type === 'chunk' && !chunk.isEntry) {
+          // links for entry chunks are already generated in static HTML
+          // so we only need to record info for non-entry chunks
+          // TODO: also include non-CSS assets
+          const cssFileHandle = chunkToEmittedCssFileMap.get(chunk)
+          const cssFile = cssFileHandle && this.getFileName(cssFileHandle)
+          for (const id in chunk.modules) {
+            const mappedChunks = ssrManifest[id] || (ssrManifest[id] = [])
+            mappedChunks.push(base + chunk.fileName)
+            if (cssFile) {
+              mappedChunks.push(base + cssFile)
+            }
+          }
+        }
+      }
+
+      this.emitFile({
+        fileName: 'ssr-manifest.json',
+        type: 'asset',
+        source: JSON.stringify(ssrManifest, null, 2)
+      })
+    }
+  }
+}