From 38ef295bc2ede17352debb9c9cf537bf3574d092 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 17 Feb 2024 00:21:55 +0800
Subject: [PATCH] perf(plugin-content-update): optimize `Content` Component

---
 .../src/client/components/Content.ts          | 39 ++++++++-----------
 1 file changed, 16 insertions(+), 23 deletions(-)

diff --git a/plugins/plugin-content-update/src/client/components/Content.ts b/plugins/plugin-content-update/src/client/components/Content.ts
index d02a7987..34128d15 100644
--- a/plugins/plugin-content-update/src/client/components/Content.ts
+++ b/plugins/plugin-content-update/src/client/components/Content.ts
@@ -1,10 +1,7 @@
-import { pagesComponents } from '@internal/pagesComponents'
-import { computed, defineComponent, h } from 'vue'
-import { usePageData } from 'vuepress/client'
+import { computed, defineAsyncComponent, defineComponent, h } from 'vue'
+import { resolveRoute, usePageComponent } from 'vuepress/client'
 import { runCallbacks } from '../composables/index.js'
 
-declare const __VUEPRESS_DEV__: boolean
-
 /**
  * Markdown rendered content
  */
@@ -13,7 +10,7 @@ export const Content = defineComponent({
   name: 'Content',
 
   props: {
-    pageKey: {
+    path: {
       type: String,
       required: false,
       default: '',
@@ -21,22 +18,18 @@ export const Content = defineComponent({
   },
 
   setup(props) {
-    const page = usePageData()
-    const pageComponent = computed(
-      () => pagesComponents[props.pageKey || page.value.key],
-    )
-    return () =>
-      pageComponent.value
-        ? h(pageComponent.value, {
-          onVnodeMounted: () => runCallbacks({ mounted: true }),
-          onVnodeUpdated: () => runCallbacks({ updated: true }),
-          onVnodeBeforeUnmount: () => runCallbacks({ beforeUnmount: true }),
-        })
-        : h(
-          'div',
-          __VUEPRESS_DEV__
-            ? 'Page does not exist. This is a fallback content.'
-            : '404 Not Found',
-        )
+    const pageComponent = usePageComponent()
+    const ContentComponent = computed(() => {
+      if (!props.path)
+        return pageComponent.value
+      const route = resolveRoute(props.path)
+      return defineAsyncComponent(() => route.loader().then(({ comp }) => comp))
+    })
+
+    return () => h(ContentComponent.value, {
+      onVnodeMounted: () => runCallbacks({ mounted: true }),
+      onVnodeUpdated: () => runCallbacks({ updated: true }),
+      onVnodeBeforeUnmount: () => runCallbacks({ beforeUnmount: true }),
+    })
   },
 })