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,
 });