perf: improve default theme chunking

vuejs · Mar 10, 2023 · f6cb4c0 · f6cb4c0
1 parent 5c00bd3
commit f6cb4c0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/client/theme-default/index.ts b/src/client/theme-default/index.ts
@@ -12,6 +12,9 @@ import type { Theme } from 'vitepress'
 import VPBadge from './components/VPBadge.vue'
 import Layout from './Layout.vue'
 
+// Note: if we add more optional components here, i.e. components that are not
+// used in the theme by default unless the user imports them, make sure to update
+// the `lazyDefaultThemeComponentsRE` regex in src/node/build/bundle.ts.
 export { default as VPHomeHero } from './components/VPHomeHero.vue'
 export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
 export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue'

diff --git a/src/node/build/bundle.ts b/src/node/build/bundle.ts
@@ -13,10 +13,20 @@ import { APP_PATH } from '../alias'
 import { createVitePressPlugin } from '../plugin'
 import { sanitizeFileName } from '../shared'
 import { buildMPAClient } from './buildMPAClient'
+import { fileURLToPath } from 'url'
+import { normalizePath } from 'vite'
 
 export const okMark = '\x1b[32m✓\x1b[0m'
 export const failMark = '\x1b[31m✖\x1b[0m'
 
+// A list of default theme components that should only be loaded on demand.
+const lazyDefaultThemeComponentsRE =
+  /VP(HomeSponsors|DocAsideSponsors|TeamPage|TeamMembers|AlgoliaSearch|CarbonAds|DocAsideCarbonAds)/
+
+const clientDir = normalizePath(
+  path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../client')
+)
+
 // bundles the VitePress app for both client AND server.
 export async function bundle(
   config: SiteConfig,
@@ -100,6 +110,13 @@ export async function bundle(
                     : 'assets/chunks/[name].[hash].js'
                 },
                 manualChunks(id, ctx) {
+                  // optimize default theme chunking
+                  if (
+                    id.includes(`${clientDir}/theme-default`) &&
+                    !lazyDefaultThemeComponentsRE.test(id)
+                  ) {
+                    return 'theme'
+                  }
                   // move known framework code into a stable chunk so that
                   // custom theme changes do not invalidate hash for all pages
                   if (id.includes('plugin-vue:export-helper')) {
@@ -108,7 +125,7 @@ export async function bundle(
                   if (
                     isEagerChunk(id, ctx.getModuleInfo) &&
                     (/@vue\/(runtime|shared|reactivity)/.test(id) ||
-                      /vitepress\/dist\/client/.test(id))
+                      id.includes(clientDir))
                   ) {
                     return 'framework'
                   }
@@ -174,7 +191,7 @@ function isEagerChunk(id: string, getModuleInfo: GetModuleInfo) {
     !/\.css($|\\?)/.test(id) &&
     staticImportedByEntry(id, getModuleInfo, cache)
   ) {
-    return 'vendor'
+    return true
   }
 }