perf: reduce memory usage during rendering

Author: meteorlxy

packages/bundler-vite/src/build/build.ts

@@ -68,16 +68,19 @@ export const build = async (
     const { createVueApp } = await importFile<{
       createVueApp: CreateVueAppFunction
     }>(serverEntryPath)
+    // create vue ssr app
+    const { app: vueApp, router: vueRouter } = await createVueApp()
+    const { renderToString } = await import('vue/server-renderer')
 
     // pre-render pages to html files
     for (const page of app.pages) {
-      if (spinner) {
-        spinner.text = `Rendering pages ${chalk.magenta(page.path)}`
-      }
+      if (spinner) spinner.text = `Rendering pages ${chalk.magenta(page.path)}`
       await renderPage({
         app,
         page,
-        createVueApp,
+        vueApp,
+        vueRouter,
+        renderToString,
         ssrTemplate,
         output: clientOutput.output,
         outputEntryChunk: clientEntryChunk,

packages/bundler-vite/src/build/renderPage.ts

@@ -1,7 +1,9 @@
-import type { CreateVueAppFunction } from '@vuepress/client'
 import type { App, Page } from '@vuepress/core'
 import { fs, renderHead } from '@vuepress/utils'
 import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'
+import { ssrContextKey } from 'vue'
+import type { App as VueApp } from 'vue'
+import type { Router } from 'vue-router'
 import type { SSRContext } from 'vue/server-renderer'
 import { renderPagePrefetchLinks } from './renderPagePrefetchLinks.js'
 import { renderPagePreloadLinks } from './renderPagePreloadLinks.js'
@@ -12,35 +14,36 @@ import { resolvePageChunkFiles } from './resolvePageChunkFiles.js'
 export const renderPage = async ({
   app,
   page,
-  createVueApp,
+  vueApp,
+  vueRouter,
+  renderToString,
   ssrTemplate,
   output,
   outputEntryChunk,
   outputCssAsset,
 }: {
   app: App
   page: Page
-  createVueApp: CreateVueAppFunction
+  vueApp: VueApp
+  vueRouter: Router
+  renderToString: (input: VueApp, context: SSRContext) => Promise<string>
   ssrTemplate: string
   output: RollupOutput['output']
   outputEntryChunk: OutputChunk
   outputCssAsset: OutputAsset | undefined
 }): Promise<void> => {
-  // create vue ssr app
-  const { app: vueApp, router: vueRouter } = await createVueApp()
-
   // switch to current page route
   await vueRouter.push(page.path)
   await vueRouter.isReady()
 
   // create vue ssr context with default values
+  delete vueApp._context.provides[ssrContextKey]
   const ssrContext: SSRContext = {
     lang: 'en',
     head: [],
   }
 
   // render current page to string
-  const { renderToString } = await import('vue/server-renderer')
   const pageRendered = await renderToString(vueApp, ssrContext)
 
   // resolve page chunks

packages/bundler-webpack/src/build/build.ts

@@ -91,6 +91,9 @@ export const build = async (
     const { createVueApp } = await importFileDefault<{
       createVueApp: CreateVueAppFunction
     }>(serverEntryPath)
+    // create vue ssr app
+    const { app: vueApp, router: vueRouter } = await createVueApp()
+    const { renderToString } = await import('vue/server-renderer')
 
     // pre-render pages to html files
     for (const page of app.pages) {
@@ -100,7 +103,9 @@ export const build = async (
       await renderPage({
         app,
         page,
-        createVueApp,
+        vueApp,
+        vueRouter,
+        renderToString,
         ssrTemplate,
         allFilesMeta,
         initialFilesMeta,

packages/bundler-webpack/src/build/renderPage.ts

@@ -1,7 +1,9 @@
-import type { CreateVueAppFunction } from '@vuepress/client'
 import type { App, Page } from '@vuepress/core'
 import type { VuepressSSRContext } from '@vuepress/shared'
 import { fs, renderHead } from '@vuepress/utils'
+import { ssrContextKey } from 'vue'
+import type { App as VueApp } from 'vue'
+import type { Router } from 'vue-router'
 import type { SSRContext } from 'vue/server-renderer'
 import { renderPagePrefetchLinks } from './renderPagePrefetchLinks.js'
 import { renderPagePreloadLinks } from './renderPagePreloadLinks.js'
@@ -25,7 +27,9 @@ interface PageRenderContext extends SSRContext, VuepressSSRContext {
 export const renderPage = async ({
   app,
   page,
-  createVueApp,
+  vueApp,
+  vueRouter,
+  renderToString,
   ssrTemplate,
   allFilesMeta,
   initialFilesMeta,
@@ -34,29 +38,28 @@ export const renderPage = async ({
 }: {
   app: App
   page: Page
-  createVueApp: CreateVueAppFunction
+  vueApp: VueApp
+  vueRouter: Router
+  renderToString: (input: VueApp, context: SSRContext) => Promise<string>
   ssrTemplate: string
   allFilesMeta: FileMeta[]
   initialFilesMeta: FileMeta[]
   asyncFilesMeta: FileMeta[]
   moduleFilesMetaMap: ModuleFilesMetaMap
 }): Promise<void> => {
-  // create vue ssr app
-  const { app: vueApp, router: vueRouter } = await createVueApp()
-
   // switch to current page route
   await vueRouter.push(page.path)
   await vueRouter.isReady()
 
   // create vue ssr context with default values
+  delete vueApp._context.provides[ssrContextKey]
   const ssrContext: PageRenderContext = {
     _registeredComponents: new Set(),
     lang: 'en',
     head: [],
   }
 
   // render current page to string
-  const { renderToString } = await import('vue/server-renderer')
   const pageRendered = await renderToString(vueApp, ssrContext)
 
   // resolve client files that used by this page