diff --git a/examples/src/data/Quick/index.ts b/examples/src/data/Quick/index.ts
index 94eea35f..c69ded64 100644
--- a/examples/src/data/Quick/index.ts
+++ b/examples/src/data/Quick/index.ts
@@ -1,7 +1,8 @@
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 
 import handler, { QUICK_TYPE } from './handler'
-import Quick from './Pane.vue'
+
+const Quick = defineAsyncComponent(() => import('./Pane.vue'))
 
 export default {
   type: QUICK_TYPE,
diff --git a/examples/src/data/Rest/index.ts b/examples/src/data/Rest/index.ts
index f65ab2d9..23e33a8b 100644
--- a/examples/src/data/Rest/index.ts
+++ b/examples/src/data/Rest/index.ts
@@ -1,11 +1,9 @@
 import { RequestMethod, RestHandler } from '@open-data-v/data'
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 
 import { apiHttp as http } from '@/utils/http'
 import { uuid } from '@/utils/utils'
 
-import DataView from './Pane.vue'
-
 class RestRequestHandler extends RestHandler {
   constructor(options) {
     const connector = http
@@ -13,6 +11,8 @@ class RestRequestHandler extends RestHandler {
   }
 }
 
+const DataView = defineAsyncComponent(() => import('./Pane.vue'))
+
 export default {
   type: 'REST',
   name: '动态数据',
diff --git a/packages/data/src/rest/index.ts b/packages/data/src/rest/index.ts
index 7446f398..f0d25d5c 100644
--- a/packages/data/src/rest/index.ts
+++ b/packages/data/src/rest/index.ts
@@ -1,13 +1,14 @@
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 
 import { uuid } from '../utils'
 import RestHandler from './handler'
-import RestPane from './Pane.vue'
 import { RequestMethod } from './requestEnums'
-import RestContent from './RestDataView.vue'
 import type { RestOption, RestResponse } from './type'
 import { KVToRecordable, recordabletoKV, requestOptionsToStore } from './utils'
 
+const RestPane = defineAsyncComponent(() => import('./Pane.vue'))
+const RestContent = defineAsyncComponent(() => import('./RestDataView.vue'))
+
 export default {
   type: 'REST',
   name: '动态数据',
diff --git a/packages/data/src/static/index.ts b/packages/data/src/static/index.ts
index 17ae9f65..01c632e2 100644
--- a/packages/data/src/static/index.ts
+++ b/packages/data/src/static/index.ts
@@ -1,8 +1,9 @@
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 
-import StaticContent from './DataView.vue'
 import handler from './handler'
-import StaticPane from './Pane.vue'
+
+const StaticPane = defineAsyncComponent(() => import('./Pane.vue'))
+const StaticContent = defineAsyncComponent(() => import('./DataView.vue'))
 
 export default {
   type: 'STATIC',
diff --git a/packages/data/src/sub/index.ts b/packages/data/src/sub/index.ts
index 93189e4d..84fe1c99 100644
--- a/packages/data/src/sub/index.ts
+++ b/packages/data/src/sub/index.ts
@@ -1,8 +1,9 @@
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 
 import handler from './handler'
-import SubPane from './Pane.vue'
-import Subontent from './SubDataView.vue'
+
+const Subontent = defineAsyncComponent(() => import('./SubDataView.vue'))
+const SubPane = defineAsyncComponent(() => import('./Pane.vue'))
 
 export default {
   type: 'SUB',
diff --git a/packages/data/src/websocket/index.ts b/packages/data/src/websocket/index.ts
index 050cd8ce..b92ae2b6 100644
--- a/packages/data/src/websocket/index.ts
+++ b/packages/data/src/websocket/index.ts
@@ -1,9 +1,10 @@
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 
 import handler from './handler'
-import WebSocketPane from './Pane.vue'
 import type { WebsocketOption } from './type'
-import WebSocketContent from './WebsocketView.vue'
+
+const WebSocketContent = defineAsyncComponent(() => import('./WebsocketView.vue'))
+const WebSocketPane = defineAsyncComponent(() => import('./Pane.vue'))
 
 export default {
   type: 'WS',
diff --git a/packages/designer/src/data/DemoData/index.ts b/packages/designer/src/data/DemoData/index.ts
index b9308376..6a3d9da8 100644
--- a/packages/designer/src/data/DemoData/index.ts
+++ b/packages/designer/src/data/DemoData/index.ts
@@ -1,7 +1,8 @@
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 
 import DemoRequestData from './handler'
-import DemoPane from './Pane.vue'
+
+const DemoPane = defineAsyncComponent(() => import('./Pane.vue'))
 
 export default {
   type: 'DEMO',
diff --git a/packages/scripts/src/custom/index.ts b/packages/scripts/src/custom/index.ts
index 3035ddbc..25ba5d35 100644
--- a/packages/scripts/src/custom/index.ts
+++ b/packages/scripts/src/custom/index.ts
@@ -1,8 +1,9 @@
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 
 import ScriptHandler from './handler'
 import { makeFunction } from './utils'
-import View from './View.vue'
+
+const View = defineAsyncComponent(() => import('./View.vue'))
 
 export default {
   type: 'Custom',
diff --git a/packages/scripts/src/system/index.ts b/packages/scripts/src/system/index.ts
index 8dc4560f..b2d40510 100644
--- a/packages/scripts/src/system/index.ts
+++ b/packages/scripts/src/system/index.ts
@@ -1,8 +1,9 @@
-import { shallowRef } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 
 import ScriptHandler from './handler'
 import funcs from './scripts'
-import View from './View.vue'
+
+const View = defineAsyncComponent(() => import('./View.vue'))
 
 export default {
   type: 'System',