From a16a7e6a4d8a072ca94f5c2c50a17bfbf70279af Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 22 Sep 2022 15:22:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(runtime):=20vue3=E4=BD=BF=E7=94=A8dynamicI?=
 =?UTF-8?q?mport?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 runtime/vue2/page/main.ts     | 4 +---
 runtime/vue3/page/main.ts     | 9 ++++++---
 runtime/vue3/tmagic.config.ts | 1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/runtime/vue2/page/main.ts b/runtime/vue2/page/main.ts
index 72082888..624d829e 100644
--- a/runtime/vue2/page/main.ts
+++ b/runtime/vue2/page/main.ts
@@ -36,9 +36,7 @@ const app = new Core({
 });
 
 Object.keys(components).forEach((type: string) => {
-  const component = components[type];
-  Vue.component(`magic-ui-${type}`, component);
-  app.registerComponent(type, component);
+  Vue.component(`magic-ui-${type}`, components[type]);
 });
 
 Object.values(plugins).forEach((plugin: any) => {
diff --git a/runtime/vue3/page/main.ts b/runtime/vue3/page/main.ts
index 11d7ac47..7e174f31 100644
--- a/runtime/vue3/page/main.ts
+++ b/runtime/vue3/page/main.ts
@@ -16,12 +16,12 @@
  * limitations under the License.
  */
 
-import { createApp } from 'vue';
+import { createApp, defineAsyncComponent } from 'vue';
 
 import Core from '@tmagic/core';
 import { getUrlParam } from '@tmagic/utils';
 
-import components from '../.tmagic/comp-entry';
+import components from '../.tmagic/async-comp-entry';
 import plugins from '../.tmagic/plugin-entry';
 
 import request from './utils/request';
@@ -33,7 +33,10 @@ const magicApp = createApp(AppComponent);
 magicApp.use(request);
 
 Object.entries(components).forEach(([type, component]: [string, any]) => {
-  magicApp.component(`magic-ui-${type}`, component);
+  magicApp.component(
+    `magic-ui-${type}`,
+    defineAsyncComponent(() => component),
+  );
 });
 
 Object.values(plugins).forEach((plugin: any) => {
diff --git a/runtime/vue3/tmagic.config.ts b/runtime/vue3/tmagic.config.ts
index bea68539..5ebc3b3b 100644
--- a/runtime/vue3/tmagic.config.ts
+++ b/runtime/vue3/tmagic.config.ts
@@ -5,4 +5,5 @@ import { defineConfig } from '@tmagic/cli';
 export default defineConfig({
   packages: [path.join(__dirname, '../../packages/ui')],
   componentFileAffix: '.vue',
+  dynamicImport: true,
 });