feat: merge comp and data into 1 chunk

e2e/tests/routes/resolve.cy.ts

@@ -5,6 +5,6 @@ it('resolve', () => {
   cy.get('.e2e-theme-content ul li').each((el) => {
     const data = JSON.parse(/: (\{.*\})\s*$/.exec(el.text())![1])
 
-    expect(data).to.deep.contains(result)
+    expect(data).to.deep.include(result)
   })
 })

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

@@ -11,9 +11,7 @@ export const resolvePageChunkFiles = ({
   output
     .filter(
       (item): item is OutputChunk =>
-        item.type === 'chunk' &&
-        (item.facadeModuleId === page.componentFilePath ||
-          item.facadeModuleId === page.dataFilePath),
+        item.type === 'chunk' && item.facadeModuleId === page.chunkFilePath,
     )
     .flatMap(({ fileName, imports, dynamicImports }) => [
       fileName,

packages/cli/src/commands/dev/handlePageAdd.ts

@@ -1,7 +1,7 @@
 import {
   createPage,
+  preparePage,
   preparePageComponent,
-  preparePageData,
   preparePagesMap,
 } from '@vuepress/core'
 import type { App, Page } from '@vuepress/core'
@@ -31,7 +31,7 @@ export const handlePageAdd = async (
 
   // prepare page files
   await preparePageComponent(app, page)
-  await preparePageData(app, page)
+  await preparePage(app, page)
 
   // prepare pages entry
   await preparePagesMap(app)

packages/cli/src/commands/dev/handlePageChange.ts

@@ -1,7 +1,7 @@
 import {
   createPage,
+  preparePage,
   preparePageComponent,
-  preparePageData,
   preparePagesMap,
 } from '@vuepress/core'
 import type { App, Page } from '@vuepress/core'
@@ -34,7 +34,7 @@ export const handlePageChange = async (
 
   // prepare page files
   await preparePageComponent(app, pageNew)
-  await preparePageData(app, pageNew)
+  await preparePage(app, pageNew)
 
   const isPathChanged = pageOld.path !== pageNew.path
   const isMetaChanged =

packages/client/src/components/Content.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h } from 'vue'
+import { computed, defineAsyncComponent, defineComponent, h } from 'vue'
 import { pagesMap, usePageData } from '../composables/index.js'
 
 /**
@@ -18,9 +18,14 @@ export const Content = defineComponent({
 
   setup(props) {
     const page = usePageData()
-    const pageComponent = computed(
-      () => pagesMap.value.get(props.path || page.value.path)?.comp,
-    )
+    const pageComponent = computed(() => {
+      const pageInfo = pagesMap.value.get(props.path || page.value.path)
+
+      return pageInfo
+        ? defineAsyncComponent(() => pageInfo.v().then(({ comp }) => comp))
+        : null
+    })
+
     return () =>
       pageComponent.value
         ? // use page component

packages/client/src/resolvers.ts

@@ -1,4 +1,4 @@
-import type { PageInfo, PageRedirectsMap, PagesMap } from '@internal/pagesMap'
+import type { PageRedirectsMap, PagesMap } from '@internal/pagesMap'
 import {
   dedupeHead,
   isArray,
@@ -69,14 +69,9 @@ export const resolvers = reactive({
    * Resolve page data according to page path and page info
    */
   resolvePageData: async (
-    pageInfo: PageInfo,
+    pageData: PageData,
     _path: string,
-  ): Promise<PageData> => {
-    const pageData = await pageInfo?.data?.()
-
-    return pageData ?? pageDataEmpty
-  },
-
+  ): Promise<PageData> => Promise.resolve(pageData ?? pageDataEmpty),
   /**
    * Resolve page frontmatter from page data
    */

packages/client/src/router.ts

@@ -58,10 +58,10 @@ export const createVueRouter = (): Router => {
 
       // TODO: Added for backwards compatibility, remove in stable version
       to.meta = pageInfo.meta
-      ;[to.meta._data] = await Promise.all([
-        resolvers.resolvePageData(pageInfo, pagePath),
-        pageInfo.comp?.__asyncLoader(),
-      ])
+      to.meta._data = await resolvers.resolvePageData(
+        (await pageInfo.v()).data,
+        pagePath,
+      )
     }
   })
 

packages/client/src/types/internal/pagesMap.d.ts

@@ -5,8 +5,10 @@ declare module '@internal/pagesMap' {
   export type PageRedirectsMap = Map<string, string>
 
   export interface PageInfo<PageMeta = Record<string, unknown>> {
-    comp: ComponentOptions
-    data: () => Promise<PageData>
+    v: () => Promise<{
+      comp: ComponentOptions
+      data: PageData
+    }>
     meta: PageMeta
   }
 

packages/core/src/app/appPrepare.ts

@@ -2,8 +2,8 @@ import { debug } from '@vuepress/utils'
 import type { App } from '../types/index.js'
 import {
   prepareClientConfigs,
+  preparePage,
   preparePageComponent,
-  preparePageData,
   preparePagesMap,
   prepareSiteData,
 } from './prepare/index.js'
@@ -28,7 +28,7 @@ export const appPrepare = async (app: App): Promise<void> => {
 
   // generate page data files
   for (const page of app.pages) {
-    await preparePageData(app, page)
+    await preparePage(app, page)
   }
 
   // generate pages map

packages/core/src/app/prepare/index.ts

@@ -1,5 +1,5 @@
 export * from './prepareClientConfigs.js'
+export * from './preparePage.js'
 export * from './preparePageComponent.js'
-export * from './preparePageData.js'
 export * from './preparePagesMap.js'
 export * from './prepareSiteData.js'

packages/core/src/app/prepare/preparePageData.ts → packages/core/src/app/prepare/preparePage.ts

@@ -16,19 +16,21 @@ if (import.meta.hot) {
 `
 
 /**
- * Generate page data temp file of a single page
+ * Generate page temp file of a single page
  */
-export const preparePageData = async (app: App, page: Page): Promise<void> => {
+export const preparePage = async (app: App, page: Page): Promise<void> => {
   // page data file content
-  let content = `export const data = JSON.parse(${JSON.stringify(
-    JSON.stringify(page.data),
-  )})
+  let content = `\
+import comp from ${JSON.stringify(page.componentFilePath)}
+
+const data = JSON.parse(${JSON.stringify(JSON.stringify(page.data))})
+export { comp, data }
 `
 
   // inject HMR code
   if (app.env.isDev) {
     content += HMR_CODE
   }
 
-  await app.writeTemp(page.dataFilePathRelative, content)
+  await app.writeTemp(page.chunkFilePathRelative, content)
 }

packages/core/src/app/prepare/preparePagesMap.ts

@@ -57,26 +57,13 @@ const resolvePageRedirects = ({
 export const preparePagesMap = async (app: App): Promise<void> => {
   const pagesMapEntries = app.pages
     .map((page) => {
-      const {
-        meta,
-        path,
-        dataFilePath,
-        dataFileChunkName,
-        componentFilePath,
-        componentFileChunkName,
-      } = page
+      const { meta, path, chunkFilePath, chunkName } = page
       const redirects = resolvePageRedirects(page)
 
       return `\
-  [${JSON.stringify(path)}, defineAsyncComponent(() => import(${
-    componentFileChunkName
-      ? `/* webpackChunkName: "${componentFileChunkName}" */`
-      : ''
-  }${JSON.stringify(componentFilePath)})), () => import(${
-    dataFileChunkName ? `/* webpackChunkName: "${dataFileChunkName}" */` : ''
-  }${JSON.stringify(dataFilePath)}).then(({ data }) => data), ${JSON.stringify(
-    meta,
-  )}${
+  [${JSON.stringify(path)}, () => import(${
+    chunkName ? `/* webpackChunkName: "${chunkName}" */` : ''
+  }${JSON.stringify(chunkFilePath)}), ${JSON.stringify(meta)}${
     redirects.length
       ? `, [${redirects.map((path) => JSON.stringify(path)).join(', ')}]`
       : ''
@@ -94,11 +81,11 @@ ${pagesMapEntries}
 
 export const redirectsMap = new Map(
   pagesMapEntries
-    .flatMap(([path, , , , redirects = []]) => redirects.map((redirect) => [redirect, path])),
+    .flatMap(([path, , , redirects = []]) => redirects.map((redirect) => [redirect, path])),
 );
 
 export const pagesMap = new Map(
-  pagesMapEntries.map(([path, comp, data, meta]) => [path, { comp, data, meta }]),
+  pagesMapEntries.map(([path, v, meta]) => [path, { v, meta }]),
 );
 `
 

packages/core/src/page/createPage.ts

@@ -1,8 +1,8 @@
 import type { App, Page, PageOptions } from '../types/index.js'
 import { inferPagePath } from './inferPagePath.js'
 import { renderPageContent } from './renderPageContent.js'
+import { resolvePageChunkInfo } from './resolvePageChunkInfo.js'
 import { resolvePageComponentInfo } from './resolvePageComponentInfo.js'
-import { resolvePageDataInfo } from './resolvePageDataInfo.js'
 import { resolvePageDate } from './resolvePageDate.js'
 import { resolvePageFileContent } from './resolvePageFileContent.js'
 import { resolvePageFilePath } from './resolvePageFilePath.js'
@@ -96,8 +96,8 @@ export const createPage = async (
     key,
   })
 
-  const { dataFilePath, dataFilePathRelative, dataFileChunkName } =
-    resolvePageDataInfo({ app, htmlFilePathRelative, key })
+  const { chunkFilePath, chunkFilePathRelative, chunkName } =
+    resolvePageChunkInfo({ app, htmlFilePathRelative, key })
 
   const page: Page = {
     // page data
@@ -138,9 +138,9 @@ export const createPage = async (
     componentFilePath,
     componentFilePathRelative,
     componentFileChunkName,
-    dataFilePath,
-    dataFilePathRelative,
-    dataFileChunkName,
+    chunkFilePath,
+    chunkFilePathRelative,
+    chunkName,
     htmlFilePath,
     htmlFilePathRelative,
 

packages/core/src/page/index.ts

@@ -1,8 +1,8 @@
 export * from './createPage.js'
 export * from './inferPagePath.js'
 export * from './renderPageContent.js'
+export * from './resolvePageChunkInfo.js'
 export * from './resolvePageComponentInfo.js'
-export * from './resolvePageDataInfo.js'
 export * from './resolvePageDate.js'
 export * from './resolvePageFileContent.js'
 export * from './resolvePageFilePath.js'

packages/core/src/page/resolvePageChunkInfo.ts

@@ -0,0 +1,29 @@
+import { path } from '@vuepress/utils'
+import type { App } from '../types/index.js'
+
+/**
+ * Resolve page data file path
+ */
+export const resolvePageChunkInfo = ({
+  app,
+  htmlFilePathRelative,
+  key,
+}: {
+  app: App
+  htmlFilePathRelative: string
+  key: string
+}): {
+  chunkFilePath: string
+  chunkFilePathRelative: string
+  chunkName: string
+} => {
+  const chunkFilePathRelative = path.join('pages', `${htmlFilePathRelative}.js`)
+  const chunkFilePath = app.dir.temp(chunkFilePathRelative)
+  const chunkName = key
+
+  return {
+    chunkFilePath,
+    chunkFilePathRelative,
+    chunkName,
+  }
+}

packages/core/src/types/page.ts

@@ -121,21 +121,21 @@ export type Page<
     componentFileChunkName: string
 
     /**
-     * Page data file path
+     * Page file path
      */
-    dataFilePath: string
+    chunkFilePath: string
 
     /**
-     * Page data file path relative to temp directory
+     * Page file path relative to temp directory
      */
-    dataFilePathRelative: string
+    chunkFilePathRelative: string
 
     /**
-     * Page data file chunk name
+     * Page file chunk name
      *
      * Only take effect in webpack
      */
-    dataFileChunkName: string
+    chunkName: string
 
     /**
      * Rendered html file path

packages/core/tests/page/createPage.spec.ts

@@ -81,13 +81,13 @@ describe('core > page > createPage', () => {
       `pages/${page.htmlFilePathRelative}.vue`,
     )
     expect(page.componentFileChunkName).toBe(page.key)
-    expect(page.dataFilePath).toBe(
+    expect(page.chunkFilePath).toBe(
       app.dir.temp(`pages/${page.htmlFilePathRelative}.js`),
     )
-    expect(page.dataFilePathRelative).toBe(
+    expect(page.chunkFilePathRelative).toBe(
       `pages/${page.htmlFilePathRelative}.js`,
     )
-    expect(page.dataFileChunkName).toBe(page.key)
+    expect(page.chunkName).toBe(page.key)
   })
 
   it('should be extended by plugin correctly', async () => {