feat(ssr): include non-CSS assets in the manifest (vitejs#3556)

ygj6 · Jun 1, 2021 · 27569d7 · 27569d7
1 parent 63ff75e
commit 27569d7
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 6 deletions.
diff --git a/packages/playground/ssr-vue/src/App.vue b/packages/playground/ssr-vue/src/App.vue
@@ -11,6 +11,17 @@
 </template>
 
 <style>
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./assets/fonts/Inter-Italic.woff2?#iefix') format('woff2'),
+    url('./assets/fonts/Inter-Italic.woff') format('woff');
+}
+.inter {
+  font-family: 'Inter';
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

diff --git a/packages/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff b/packages/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff
diff --git a/packages/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff2 b/packages/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff2
diff --git a/packages/playground/ssr-vue/src/entry-server.js b/packages/playground/ssr-vue/src/entry-server.js
@@ -44,6 +44,18 @@ function renderPreloadLink(file) {
     return `<link rel="modulepreload" crossorigin href="${file}">`
   } else if (file.endsWith('.css')) {
     return `<link rel="stylesheet" href="${file}">`
+  } else if (file.endsWith('.woff')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`
+  } else if (file.endsWith('.woff2')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`
+  } else if (file.endsWith('.gif')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/gif" crossorigin>`
+  } else if (file.endsWith('.jpg')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg" crossorigin>`
+  } else if (file.endsWith('.jpeg')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg" crossorigin>`
+  } else if (file.endsWith('.png')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/png" crossorigin>`
   } else {
     // TODO
     return ''

diff --git a/packages/playground/ssr-vue/src/pages/Home.vue b/packages/playground/ssr-vue/src/pages/Home.vue
@@ -6,6 +6,7 @@
   <button @click="state.count++">count is: {{ state.count }}</button>
   <Foo />
   <p class="virtual">msg from virtual module: {{ foo.msg }}</p>
+  <p class="inter">this will be styled with a font-face</p>
 
   <ImportType />
 </template>

diff --git a/packages/vite/src/node/ssr/ssrManifestPlugin.ts b/packages/vite/src/node/ssr/ssrManifestPlugin.ts
@@ -1,6 +1,7 @@
 import { ResolvedConfig } from '..'
 import { Plugin } from '../plugin'
 import { chunkToEmittedCssFileMap } from '../plugins/css'
+import { chunkToEmittedAssetsMap } from '../plugins/asset'
 
 export function ssrManifestPlugin(config: ResolvedConfig): Plugin {
   // module id => preload assets mapping
@@ -12,19 +13,28 @@ export function ssrManifestPlugin(config: ResolvedConfig): Plugin {
     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 cssFiles = chunkToEmittedCssFileMap.get(chunk)
+        if (chunk.type === 'chunk') {
+          // links for certain entry chunks are already generated in static HTML
+          // in those cases we only need to record info for non-entry chunks
+          const cssFiles = chunk.isEntry
+            ? null
+            : chunkToEmittedCssFileMap.get(chunk)
+          const assetFiles = chunkToEmittedAssetsMap.get(chunk)
           for (const id in chunk.modules) {
             const mappedChunks = ssrManifest[id] || (ssrManifest[id] = [])
-            mappedChunks.push(base + chunk.fileName)
+            if (!chunk.isEntry) {
+              mappedChunks.push(base + chunk.fileName)
+            }
             if (cssFiles) {
               cssFiles.forEach((file) => {
                 mappedChunks.push(base + file)
               })
             }
+            if (assetFiles) {
+              assetFiles.forEach((file) => {
+                mappedChunks.push(base + file)
+              })
+            }
           }
         }
       }