diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json
index 328a4f277..7288c3e00 100644
--- a/designer-demo/public/mock/bundle.json
+++ b/designer-demo/public/mock/bundle.json
@@ -19,10 +19,6 @@
           "dev_mode": "proCode",
           "npm": {
             "package": "element-plus",
-            "version": "2.4.2",
-            "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs",
-            "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css",
-            "dependencies": null,
             "exportName": "ElInput"
           },
           "group": "表单组件",
@@ -299,10 +295,6 @@
           "dev_mode": "proCode",
           "npm": {
             "package": "element-plus",
-            "version": "2.4.2",
-            "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs",
-            "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css",
-            "dependencies": null,
             "exportName": "ElButton"
           },
           "group": "基础组件",
@@ -620,10 +612,6 @@
           "dev_mode": "proCode",
           "npm": {
             "package": "element-plus",
-            "version": "2.4.2",
-            "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs",
-            "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css",
-            "dependencies": null,
             "exportName": "ElForm"
           },
           "group": "表单组件",
@@ -1075,10 +1063,6 @@
           "dev_mode": "proCode",
           "npm": {
             "package": "element-plus",
-            "version": "2.4.2",
-            "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs",
-            "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css",
-            "dependencies": null,
             "exportName": "ElFormItem"
           },
           "group": "表单组件",
@@ -1424,10 +1408,6 @@
           "dev_mode": "proCode",
           "npm": {
             "package": "element-plus",
-            "version": "2.4.2",
-            "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs",
-            "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css",
-            "dependencies": null,
             "exportName": "ElTable"
           },
           "group": "数据展示",
@@ -2661,10 +2641,6 @@
           "dev_mode": "proCode",
           "npm": {
             "package": "element-plus",
-            "version": "2.4.2",
-            "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs",
-            "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css",
-            "dependencies": null,
             "exportName": "ElTableColumn"
           },
           "group": "表单组件",
@@ -2727,11 +2703,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "CarouselItem",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "CarouselItem"
           },
           "group": "component",
           "category": "容器组件",
@@ -2860,11 +2832,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Carousel",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Carousel"
           },
           "group": "component",
           "category": "容器组件",
@@ -4534,11 +4502,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "ButtonGroup",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "ButtonGroup"
           },
           "group": "component",
           "category": "general",
@@ -4692,11 +4656,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Row",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Row"
           },
           "group": "component",
           "priority": 5,
@@ -4949,11 +4909,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Form",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Form"
           },
           "group": "component",
           "priority": 5,
@@ -5303,11 +5259,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "FormItem",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "FormItem"
           },
           "group": "component",
           "priority": 12,
@@ -5435,11 +5387,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Col",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Col"
           },
           "group": "component",
           "priority": 2,
@@ -5713,11 +5661,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Button",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Button"
           },
           "group": "component",
           "priority": 2,
@@ -6052,11 +5996,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Input",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Input"
           },
           "group": "component",
           "priority": 1,
@@ -6466,11 +6406,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Radio",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Radio"
           },
           "group": "component",
           "priority": 3,
@@ -6703,11 +6639,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Select",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Select"
           },
           "group": "component",
           "priority": 8,
@@ -7108,11 +7040,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Switch",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Switch"
           },
           "group": "component",
           "priority": 9,
@@ -7307,11 +7235,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Search",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Search"
           },
           "group": "component",
           "priority": 2,
@@ -7582,11 +7506,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Checkbox",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Checkbox"
           },
           "group": "component",
           "priority": 4,
@@ -7841,11 +7761,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "CheckboxButton",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "CheckboxButton"
           },
           "group": "component",
           "priority": 1,
@@ -8029,11 +7945,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "CheckboxGroup",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "CheckboxGroup"
           },
           "group": "component",
           "priority": 2,
@@ -8238,11 +8150,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "DialogBox",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "DialogBox"
           },
           "group": "component",
           "priority": 4,
@@ -8516,11 +8424,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Tabs",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Tabs"
           },
           "group": "component",
           "priority": 10,
@@ -8797,11 +8701,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "TabItem",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "TabItem"
           },
           "group": "component",
           "priority": 2,
@@ -8906,11 +8806,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Breadcrumb",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Breadcrumb"
           },
           "group": "component",
           "priority": 1,
@@ -9045,11 +8941,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "BreadcrumbItem",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "BreadcrumbItem"
           },
           "group": "component",
           "priority": 1,
@@ -9134,11 +9026,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Collapse",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Collapse"
           },
           "group": "component",
           "priority": 3,
@@ -9261,11 +9149,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "CollapseItem",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "CollapseItem"
           },
           "group": "component",
           "priority": 2,
@@ -9372,11 +9256,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Grid",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Grid"
           },
           "group": "component",
           "priority": 2,
@@ -10286,11 +10166,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Pager",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Pager"
           },
           "group": "component",
           "priority": 1,
@@ -10519,11 +10395,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Popeditor",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Popeditor"
           },
           "group": "component",
           "priority": 6,
@@ -10882,11 +10754,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Tree",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Tree"
           },
           "group": "component",
           "priority": 12,
@@ -11217,11 +11085,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "TimeLine",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "TimeLine"
           },
           "group": "component",
           "priority": 3,
@@ -11424,11 +11288,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Tooltip",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Tooltip"
           },
           "group": "component",
           "priority": 11,
@@ -11645,11 +11505,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Popover",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Popover"
           },
           "group": "component",
           "priority": 7,
@@ -12140,11 +11996,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "DatePicker",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "DatePicker"
           },
           "group": "component",
           "priority": 1,
@@ -12555,11 +12407,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Numeric",
-            "version": "3.14.0",
-            "destructuring": true,
-            "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
-            "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+            "exportName": "Numeric"
           },
           "group": "component",
           "priority": 1,
@@ -14187,6 +14035,23 @@
             }
           ]
         }
+      ],
+      "packages": [
+        {
+          "name": "TinyVue组件库",
+          "package": "@opentiny/vue",
+          "version": "3.14.0",
+          "destructuring": true,
+          "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs",
+          "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css"
+        },
+        {
+          "name": "element-plus组件库",
+          "package": "element-plus",
+          "version": "2.4.2",
+          "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs",
+          "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css"
+        }
       ]
     }
   }
diff --git a/mockServer/src/mock/get/app-center/v1/apps/schema/918.json b/mockServer/src/mock/get/app-center/v1/apps/schema/918.json
index 17656258e..a56712aec 100644
--- a/mockServer/src/mock/get/app-center/v1/apps/schema/918.json
+++ b/mockServer/src/mock/get/app-center/v1/apps/schema/918.json
@@ -2092,7 +2092,8 @@
           "value": "",
           "package": "axios",
           "destructuring": false,
-          "exportName": "axios"
+          "exportName": "axios",
+          "cdnLink": "https://unpkg.com/browse/axios@1.7.9/dist/esm/axios.min.js"
         }
       },
       {
diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
index 63c7bb9db..129b57a55 100644
--- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue
+++ b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -65,12 +65,21 @@ export default {
     const canvasRef = ref(null)
     let showModal = false // 弹窗标识
     const { canvasSrc = '' } = getOptions(meta.id) || {}
-    let canvasSrcDoc = ''
+    const canvasSrcDoc = ref('')
 
-    if (!canvasSrc) {
-      const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion)
-      canvasSrcDoc = initCanvas(importMap, importStyles).html
-    }
+    useMessage().subscribe({
+      topic: 'init_canvas_deps',
+      subscriber: 'canvas_design_canvas',
+      callback: (deps) => {
+        if (canvasSrc) {
+          return
+        }
+
+        const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion, deps)
+
+        canvasSrcDoc.value = initCanvas(importMap, importStyles).html
+      }
+    })
 
     const removeNode = (node) => {
       const { pageState } = useCanvas()
@@ -231,6 +240,11 @@ export default {
     })
     onUnmounted(() => {
       window.removeEventListener('popstate', postUrlChanged)
+
+      useMessage().unsubscribe({
+        topic: 'init_canvas_deps',
+        subscriber: 'canvas_design_canvas'
+      })
     })
 
     return {
diff --git a/packages/canvas/DesignCanvas/src/importMap.js b/packages/canvas/DesignCanvas/src/importMap.js
index 9d8d4c536..749333d4f 100644
--- a/packages/canvas/DesignCanvas/src/importMap.js
+++ b/packages/canvas/DesignCanvas/src/importMap.js
@@ -1,6 +1,6 @@
 import { VITE_CDN_DOMAIN } from '@opentiny/tiny-engine-common/js/environments'
 
-export function getImportMapData(overrideVersions = {}) {
+export function getImportMapData(overrideVersions = {}, canvasDeps = { scripts: [], styles: [] }) {
   const importMapVersions = Object.assign(
     {
       vue: '3.4.23',
@@ -32,16 +32,25 @@ export function getImportMapData(overrideVersions = {}) {
     }
   }
 
+  const materialsAndUtilsRequire = canvasDeps.scripts.reduce((imports, { package: pkg, script }) => {
+    if (pkg && script) {
+      imports[pkg] = script
+    }
+
+    return imports
+  }, {})
+
   const importMap = {
     imports: {
       vue: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser.prod.js`,
       'vue-i18n': `${VITE_CDN_DOMAIN}/vue-i18n@${importMapVersions.vueI18n}/dist/vue-i18n.esm-browser.js`,
       ...blockRequire.imports,
-      ...tinyVueRequire.imports
+      ...tinyVueRequire.imports,
+      ...materialsAndUtilsRequire
     }
   }
 
-  const importStyles = [...blockRequire.importStyles]
+  const importStyles = [...blockRequire.importStyles, ...canvasDeps.styles]
 
   return {
     importMap,
diff --git a/packages/canvas/common/src/utils.js b/packages/canvas/common/src/utils.js
index 2b3c05b38..31b944a96 100644
--- a/packages/canvas/common/src/utils.js
+++ b/packages/canvas/common/src/utils.js
@@ -56,12 +56,20 @@ export const copyObject = (node) => {
 }
 
 /**
- * 动态导入组件，缓存组件对象
- * @param {object} param0 组件的依赖： { package: 包名，script：js文件cdn, components：组件id和导出组件名的映射关系}
+ * 动态导入获取组件库模块
+ * @param {*} pkg 模块名称
+ * @param {*} script 模块的cdn地址
  * @returns
  */
-export const dynamicImportComponents = async ({ package: pkg, script, components }) => {
-  if (!script) return
+const dynamicImportComponentLib = async ({ pkg, script }) => {
+  if (window.TinyComponentLibs[pkg]) {
+    return window.TinyComponentLibs[pkg]
+  }
+
+  if (!script) {
+    return {}
+  }
+
   const href = window.parent.location.href || location.href // 这里要取父窗口的地址，因为在iframe中href是about:srcdoc
   const scriptUrl = script.startsWith('.') ? new URL(script, href).href : script
 
@@ -71,27 +79,22 @@ export const dynamicImportComponents = async ({ package: pkg, script, components
     window.TinyComponentLibs[pkg] = modules
   }
 
-  Object.entries(components).forEach(([componentId, exportName]) => {
-    const modules = window.TinyComponentLibs[pkg]
-
-    if (!window.TinyLowcodeComponent[componentId]) {
-      window.TinyLowcodeComponent[componentId] = modules[exportName]
-    }
-  })
+  return window.TinyComponentLibs[pkg]
 }
 
 /**
- * 更新区块/组件依赖
- * @param {object} param0 依赖的CDN信息
+ * 获取组件对象并缓存，组件渲染时使用
+ * @param {object} param0 组件的依赖： { package： 包名，script：js文件cdn, components：组件id和导出组件名的映射关系}
+ * @returns
  */
-export const updateDependencies = ({ detail }) => {
-  const { scripts = [], styles = [] } = detail || {}
-  const { styles: canvasStyles } = window.thirdPartyDeps
-  const newStyles = [...styles].filter((item) => !canvasStyles.has(item))
+export const getComponents = async ({ package: pkg, script, components }) => {
+  if (!pkg) return
 
-  newStyles.forEach((item) => canvasStyles.add(item))
+  const modules = await dynamicImportComponentLib({ pkg, script })
 
-  const promises = [...newStyles].map((src) => addStyle(src)).concat(scripts.map(dynamicImportComponents))
-
-  Promise.allSettled(promises)
+  Object.entries(components).forEach(([componentId, exportName]) => {
+    if (!window.TinyLowcodeComponent[componentId]) {
+      window.TinyLowcodeComponent[componentId] = modules[exportName]
+    }
+  })
 }
diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue
index 1e940b506..13c6b96c2 100644
--- a/packages/canvas/container/src/CanvasContainer.vue
+++ b/packages/canvas/container/src/CanvasContainer.vue
@@ -33,7 +33,7 @@
 <script>
 import { onMounted, ref, computed, onUnmounted, watch, watchEffect } from 'vue'
 import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
-import { useTranslate, useCanvas, useMaterial, useMessage, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useTranslate, useCanvas, useMessage, useResource } from '@opentiny/tiny-engine-meta-register'
 import { NODE_UID, NODE_LOOP, DESIGN_MODE } from '../../common'
 import { registerHostkeyEvent, removeHostkeyEvent } from './keyboard'
 import CanvasMenu, { closeMenu, openMenu } from './components/CanvasMenu.vue'
@@ -117,7 +117,8 @@ export default {
     const beforeCanvasReady = () => {
       if (iframe.value) {
         const win = iframe.value.contentWindow
-        win.thirdPartyDeps = useMaterial().materialState.thirdPartyDeps
+        // 用于画布初始化组件依赖
+        win.componentsDeps = useResource().appSchemaState.materialsDeps.scripts.filter((item) => item.components)
 
         const { subscribe, unsubscribe } = useMessage()
         const { getSchemaDiff, patchLatestSchema, getSchema, getNode } = useCanvas()
diff --git a/packages/canvas/container/src/container.js b/packages/canvas/container/src/container.js
index f1a76427f..3c1b0a79a 100644
--- a/packages/canvas/container/src/container.js
+++ b/packages/canvas/container/src/container.js
@@ -899,6 +899,5 @@ export const initCanvas = ({ renderer, iframe, emit, controller }) => {
   }
 
   setConfigure(useMaterial().getConfigureMap())
-  canvasDispatch('updateDependencies', { detail: useMaterial().materialState.thirdPartyDeps })
   canvasState.loading = false
 }
diff --git a/packages/canvas/render/src/application-function/utils.ts b/packages/canvas/render/src/application-function/utils.ts
index 55ef60971..96195106e 100644
--- a/packages/canvas/render/src/application-function/utils.ts
+++ b/packages/canvas/render/src/application-function/utils.ts
@@ -2,6 +2,7 @@ import { ref } from 'vue'
 import TinyVue from '@opentiny/vue'
 import * as TinyVueIcon from '@opentiny/vue-icon'
 import { generateFunction } from '../data-utils'
+import { globalNotify } from '../canvas-function'
 
 export interface IUtil {
   name: string
@@ -18,7 +19,7 @@ export function useUtils(context: Record<string, any>) {
   const utils: Record<string, Function | any> = {}
   const getUtils = () => utils
 
-  const setUtils = (data: Array<IUtil>) => {
+  const setUtils = async (data: Array<IUtil>) => {
     if (!Array.isArray(data)) {
       return
     }
@@ -52,6 +53,29 @@ export function useUtils(context: Record<string, any>) {
         utilsCollection[item.name] = generateFunction(item.content.value, context) || defaultFn
       }
     })
+
+    const npmUtilsImports = data
+      .filter((item) => item.type === 'npm' && item.content.cdnLink)
+      .map((item) => import(/* @vite-ignore */ item.content.cdnLink))
+    const npmUtils = await Promise.allSettled(npmUtilsImports)
+
+    npmUtils.forEach((res, index) => {
+      const { name, content } = data[index]
+      const { exportName, destructuring, cdnLink } = content
+
+      if (res.status !== 'fulfilled') {
+        globalNotify({
+          type: 'error',
+          message: `加载工具类“${name}”失败，请检查cdn链接是否正确，${cdnLink}`
+        })
+
+        return
+      }
+
+      const module = res.value
+      utilsCollection[name] = destructuring ? module[exportName] : module.default
+    })
+
     Object.assign(utils, utilsCollection)
 
     refreshKey.value++
diff --git a/packages/canvas/render/src/runner.ts b/packages/canvas/render/src/runner.ts
index 25bf03943..7786dcce4 100644
--- a/packages/canvas/render/src/runner.ts
+++ b/packages/canvas/render/src/runner.ts
@@ -11,7 +11,7 @@
  */
 
 import { createApp } from 'vue'
-import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../../common/index.js'
+import { addScript, addStyle, getComponents } from '../../common'
 import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n'
 import Main, { api } from './RenderMain'
 import lowcode from './lowcode'
@@ -31,8 +31,6 @@ const initRenderContext = () => {
 
   window.TinyLowcodeComponent = {}
   window.TinyComponentLibs = {}
-
-  document.addEventListener('updateDependencies', updateDependencies)
 }
 
 let App = null
@@ -83,10 +81,10 @@ export const createRender = (config) => {
   initRenderContext()
 
   const { styles = [], scripts = [] } = config.canvasDependencies
-  const { styles: thirdStyles = [], scripts: thirdScripts = [] } = window.thirdPartyDeps || {}
+  const componentsDeps = window.componentsDeps || []
 
   Promise.all([
-    ...thirdScripts.map(dynamicImportComponents),
-    ...scripts.map((src) => addScript(src)).concat([...thirdStyles, ...styles].map((src) => addStyle(src)))
+    ...componentsDeps.map(getComponents),
+    ...scripts.map((src) => addScript(src)).concat(styles.map((src) => addStyle(src)))
   ]).finally(() => create(config))
 }
diff --git a/packages/canvas/render/type.d.ts b/packages/canvas/render/type.d.ts
index e146c2ba2..0f585dbf6 100644
--- a/packages/canvas/render/type.d.ts
+++ b/packages/canvas/render/type.d.ts
@@ -10,5 +10,10 @@ export declare global {
     TinyGlobalConfig: Record<string, any>
     loadBlockComponent: (blockName: string) => Promise<any>
     host: any
+    componentsDeps: Array<{
+      script: string
+      package: string
+      components: Record<string, string>
+    }>
   }
 }
diff --git a/packages/common/js/preview.js b/packages/common/js/preview.js
index 8e08f46e9..9b04a081d 100644
--- a/packages/common/js/preview.js
+++ b/packages/common/js/preview.js
@@ -12,7 +12,7 @@
 
 import { constants } from '@opentiny/tiny-engine-utils'
 import { isDevelopEnv } from './environments'
-import { useMaterial } from '@opentiny/tiny-engine-meta-register'
+import { useMaterial, useResource } from '@opentiny/tiny-engine-meta-register'
 // prefer old unicode hacks for backward compatibility
 
 const { COMPONENT_NAME } = constants
@@ -26,13 +26,14 @@ const open = (params = {}) => {
   params.app = paramsMap.get('id')
   params.tenant = paramsMap.get('tenant')
 
-  const { scripts, styles } = useMaterial().materialState.thirdPartyDeps
-  params.scripts = {}
-  scripts
-    .filter((item) => item.script)
-    .forEach((item) => {
-      params.scripts[item.package] = item.script
-    })
+  const { scripts, styles } = useMaterial().getCanvasDeps()
+  const utilsDeps = useResource().getUtilsDeps()
+
+  params.scripts = [...scripts, ...utilsDeps].reduce((res, item) => {
+    res[item.package] = item.script
+
+    return res
+  }, {})
   params.styles = [...styles]
 
   const href = window.location.href.split('?')[0] || './'
diff --git a/packages/design-core/src/preview/src/preview/Preview.vue b/packages/design-core/src/preview/src/preview/Preview.vue
index e8ad5d147..6764b09aa 100644
--- a/packages/design-core/src/preview/src/preview/Preview.vue
+++ b/packages/design-core/src/preview/src/preview/Preview.vue
@@ -61,17 +61,6 @@ export default {
       store['initTsConfig']() // 触发获取组件d.ts方便调试
     }
 
-    const addUtilsImportMap = (importMap, utils = []) => {
-      const utilsImportMaps = {}
-      utils.forEach(({ type, content: { package: packageName, cdnLink } }) => {
-        if (type === 'npm' && cdnLink) {
-          utilsImportMaps[packageName] = cdnLink
-        }
-      })
-      const newImportMap = { imports: { ...importMap.imports, ...utilsImportMaps } }
-      store.setImportMap(newImportMap)
-    }
-
     const queryParams = getSearchParams()
     const getImportMap = async () => {
       if (import.meta.env.VITE_LOCAL_BUNDLE_DEPS === 'true') {
@@ -134,7 +123,7 @@ export default {
       getImportMap()
     ]
     Promise.all(promiseList).then(async ([appData, metaData, _void, importMapData]) => {
-      addUtilsImportMap(importMapData, metaData.utils || [])
+      store.setImportMap(importMapData)
 
       const blocks = await getAllNestedBlocksSchema(queryParams.pageInfo?.schema, fetchBlockSchema)
 
diff --git a/packages/plugins/bridge/src/js/resource.js b/packages/plugins/bridge/src/js/resource.js
index 517a388ba..e99d670f2 100644
--- a/packages/plugins/bridge/src/js/resource.js
+++ b/packages/plugins/bridge/src/js/resource.js
@@ -175,10 +175,14 @@ const generateBridgeUtil = (...args) => {
   }
 }
 
-export const saveResource = (data, callback, emit) => {
-  if (getActionType() === ACTION_TYPE.Edit) {
-    data.id = state.resource.id
-    requestUpdateReSource(data).then((result) => {
+export const saveResource = async (data, callback, emit) => {
+  const isEdit = getActionType() === ACTION_TYPE.Edit
+
+  try {
+    if (isEdit) {
+      data.id = state.resource.id
+      const result = await requestUpdateReSource(data)
+
       if (result) {
         const index = useResource().appSchemaState[data.category].findIndex((item) => item.name === result.name)
 
@@ -192,36 +196,28 @@ export const saveResource = (data, callback, emit) => {
         }
 
         useResource().appSchemaState[data.category][index] = result
-
-        // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
-
-        generateBridgeUtil(getAppId())
-
-        useNotify({
-          type: 'success',
-          message: '修改成功'
-        })
-
-        emit('refresh', state.type)
-        state.refresh = true
-        callback()
       }
-    })
-  } else {
-    requestAddReSource(data).then((result) => {
+    } else {
+      const result = await requestAddReSource(data)
+
       if (result) {
         useResource().appSchemaState[data.category].push(result)
-
-        // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
-        generateBridgeUtil(getAppId())
-        useNotify({
-          type: 'success',
-          message: '创建成功'
-        })
-        emit('refresh', state.type)
-        state.refresh = true
-        callback()
       }
+    }
+
+    // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
+    generateBridgeUtil(getAppId())
+    useNotify({
+      type: 'success',
+      message: `${isEdit ? '修改' : '创建'}成功`
+    })
+    emit('refresh', state.type)
+    state.refresh = true
+    callback()
+  } catch (error) {
+    useNotify({
+      type: 'error',
+      message: `工具类${isEdit ? '修改' : '创建'}失败：${error.message}`
     })
   }
 }
diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js
index 0d87df183..e9aad8f52 100644
--- a/packages/plugins/materials/src/composable/useMaterial.js
+++ b/packages/plugins/materials/src/composable/useMaterial.js
@@ -19,6 +19,8 @@ import {
   useNotify,
   useCanvas,
   useBlock,
+  useMessage,
+  useResource,
   getMetaApi,
   META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
@@ -37,7 +39,8 @@ const blockResource = new Map()
 const materialState = reactive({
   components: [], // 这里存放的是物料插件面板里所有显示的组件
   blocks: [],
-  thirdPartyDeps: { scripts: [], styles: new Set() }
+  componentsDepsMap: { scripts: [], styles: new Set() }, //
+  packages: [] // 物料依赖的包
 })
 
 const componentState = reactive({
@@ -217,7 +220,7 @@ const clearMaterials = () => {
 const clearBlockResources = () => blockResource.clear()
 
 /**
- * 收集第三方组件库依赖
+ * 生成组件依赖映射
  * @param {array} components 组件物料列表
  */
 const generateThirdPartyDeps = (components) => {
@@ -253,16 +256,6 @@ const generateThirdPartyDeps = (components) => {
   return { styles, scripts }
 }
 
-/**
- * 设置第三方组件库依赖
- * @param {array} components 组件物料列表
- */
-const setThirdPartyDeps = (components) => {
-  const { scripts = [], styles = [] } = generateThirdPartyDeps(components)
-  materialState.thirdPartyDeps.scripts.push(...scripts)
-  styles.forEach((item) => materialState.thirdPartyDeps.styles.add(item))
-}
-
 /**
  * 添加组件snippets(分组相同则合并)
  * @param {*} componentsSnippets 待添加的组件snippets
@@ -285,6 +278,74 @@ const addComponentSnippets = (componentSnippets, snippetsData) => {
   return snippetsData
 }
 
+const getCanvasDeps = () => {
+  const { scripts, styles } = useResource().appSchemaState.materialsDeps
+
+  return {
+    scripts: [...scripts].filter((item) => item.script),
+    styles: [...styles]
+  }
+}
+
+/**
+ * 组装画布的依赖，通知画布更新docsrc
+ */
+const updateCanvasDeps = () => {
+  useMessage().publish({
+    topic: 'init_canvas_deps',
+    data: getCanvasDeps()
+  })
+}
+
+//
+const parseMaterialsDependencies = (materialBundle) => {
+  const { packages, components } = materialBundle
+
+  const { scripts: scriptsDeps, styles: stylesDeps } = useResource().appSchemaState.materialsDeps
+
+  packages?.forEach((pkg) => {
+    if (!pkg.script || !pkg.package || scriptsDeps.find((item) => item.package === pkg.package)) {
+      return
+    }
+
+    scriptsDeps.push(pkg)
+
+    if (!pkg.css) {
+      return
+    }
+
+    if (Array.isArray(pkg.css)) {
+      pkg.css.forEach((item) => stylesDeps.add(item))
+    } else {
+      stylesDeps.add(pkg.css)
+    }
+  })
+
+  // 解析组件npm字段（兼容旧的物料协议）
+  const { scripts, styles } = generateThirdPartyDeps(components)
+  // 合并到canvasDeps中
+  scripts.forEach((item) => {
+    const dep = scriptsDeps.find((dep) => dep.package === item.package)
+
+    if (dep) {
+      // 合并组件
+      dep.components = { ...dep.components, ...(item.components || {}) }
+    } else {
+      scriptsDeps.push(item)
+    }
+  })
+
+  if (!styles) {
+    return
+  }
+
+  if (Array.isArray(styles)) {
+    styles.forEach((item) => stylesDeps.add(item))
+  } else {
+    stylesDeps.add(styles)
+  }
+}
+
 /**
  * 添加物料Bundle文件中的组件类型物料
  * @param {*} materialBundle 物料包Bundle.json文件对象
@@ -292,8 +353,8 @@ const addComponentSnippets = (componentSnippets, snippetsData) => {
  */
 const addComponents = (materialBundle) => {
   const { snippets, components } = materialBundle
-  // 解析组件三方依赖
-  setThirdPartyDeps(components)
+  // 解析物料依赖
+  parseMaterialsDependencies(materialBundle)
   // 注册组件到map中
   components.forEach(registerComponentToResource)
   // 添加组件snippets
@@ -371,6 +432,8 @@ const fetchMaterial = async () => {
       addMaterials(response.value.materials)
     }
   })
+
+  updateCanvasDeps()
 }
 
 /**
@@ -383,10 +446,10 @@ const getBlockDeps = (dependencies = {}) => {
   scripts.length &&
     scripts.forEach((npm) => {
       const { package: pkg, script, css, components } = npm
-      const npmInfo = materialState.thirdPartyDeps.scripts.find((item) => item.package === pkg)
+      const npmInfo = materialState.componentsDepsMap.scripts.find((item) => item.package === pkg)
 
       if (!npmInfo || !npmInfo.script) {
-        materialState.thirdPartyDeps.scripts.push({ package: pkg, script, css, components })
+        materialState.componentsDepsMap.scripts.push({ package: pkg, script, css, components })
       } else {
         const components = npmInfo.components || {}
 
@@ -394,21 +457,9 @@ const getBlockDeps = (dependencies = {}) => {
       }
     })
 
-  styles?.forEach((item) => materialState.thirdPartyDeps.styles.add(item))
-}
-
-/**
- * 获取新增区块的依赖，更新画布中的组件依赖
- * @param {array} blocks 新增的区块列表
- */
-const updateCanvasDependencies = (blocks) => {
-  blocks.forEach((block) => {
-    if (!block.content.dependencies) return
-
-    getBlockDeps(block.content.dependencies)
-  })
-
-  useCanvas().canvasApi.value?.canvasDispatch('updateDependencies', { detail: materialState.thirdPartyDeps })
+  if (Array.isArray(styles)) {
+    styles.forEach((item) => materialState.componentsDepsMap.styles.add(item))
+  }
 }
 
 const initBuiltinMaterial = () => {
@@ -454,7 +505,8 @@ export default function () {
     setMaterial, // 设置单个物料 (property) setMaterial: (name: string, data: Material) => void
     addMaterials, // 添加多个物料
     registerBlock, // 注册新的区块
-    updateCanvasDependencies, //传入新的区块，获取新增区块的依赖，更新画布中的组件依赖
+    getCanvasDeps, // 组装画布依赖，包含物料和工具类的依赖。
+    updateCanvasDeps, // 通知画布更新依赖
     getConfigureMap, // 获取物料组件的配置信息
     getBlockByName,
     getBlockCompileRes,
diff --git a/packages/plugins/materials/src/composable/useResource.js b/packages/plugins/materials/src/composable/useResource.js
index 2d964b447..a4febd8c6 100644
--- a/packages/plugins/materials/src/composable/useResource.js
+++ b/packages/plugins/materials/src/composable/useResource.js
@@ -34,7 +34,8 @@ const appSchemaState = reactive({
   pageTree: [],
   langs: {},
   utils: {},
-  globalState: []
+  globalState: [],
+  materialsDeps: { scripts: [], styles: new Set() }
 })
 
 const initPage = (pageInfo) => {
@@ -181,9 +182,23 @@ const fetchResource = async ({ isInit = true } = {}) => {
   }
 }
 
+// 获取工具类的依赖，用于预览加载。格式和物料依赖一致，便于处理
+const getUtilsDeps = () => {
+  return appSchemaState.utils
+    .filter((item) => item.type === 'npm')
+    .map((item) => {
+      return {
+        ...item,
+        package: item.content?.package,
+        script: item.content?.cdnLink
+      }
+    })
+}
+
 export default function () {
   return {
     appSchemaState,
+    getUtilsDeps,
     fetchResource,
     initPageOrBlock,
     handlePopStateEvent,
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index 1a1380512..10fc5afa3 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -35,7 +35,6 @@ import {
   useBlock,
   useModal,
   useResource,
-  useMaterial,
   useNotify,
   getMetaApi,
   META_SERVICE
@@ -158,12 +157,7 @@ export default {
             id: groupId,
             blocks,
             app: getAppId()
-          }).then((res) => {
-            const selectedId = selectedBlockArray.value.map((b) => b.id)
-            const addedBlocks = res.blocks.filter((item) => selectedId.includes(item.id))
-
-            useMaterial().updateCanvasDependencies(addedBlocks)
-
+          }).then(() => {
             isRefresh.value = true
             clearSearchParams()
             selectedBlockArray.value.length = 0
diff --git a/packages/toolbars/generate-code/src/Main.vue b/packages/toolbars/generate-code/src/Main.vue
index a68d6ec22..49892bd03 100644
--- a/packages/toolbars/generate-code/src/Main.vue
+++ b/packages/toolbars/generate-code/src/Main.vue
@@ -145,7 +145,8 @@ export default {
         blockSchema,
         // 物料数据
         componentsMap: [...(appData.componentsMap || [])],
-
+        // 物料依赖
+        packages: [...(appData.packages || [])],
         meta: {
           ...(appData.meta || {})
         }
diff --git a/packages/vue-generator/src/plugins/genDependenciesPlugin.js b/packages/vue-generator/src/plugins/genDependenciesPlugin.js
index 5bdb77a8b..008727bdb 100644
--- a/packages/vue-generator/src/plugins/genDependenciesPlugin.js
+++ b/packages/vue-generator/src/plugins/genDependenciesPlugin.js
@@ -22,9 +22,23 @@ const getComponentsSet = (schema) => {
 }
 
 const parseSchema = (schema) => {
-  const { utils = [], componentsMap = [] } = schema
-
+  const { utils = [], componentsMap = [], packages = [] } = schema
   const resDeps = {}
+  const componentsSet = getComponentsSet(schema)
+
+  for (const { package: packageName, version, componentName } of componentsMap) {
+    if (packageName && !resDeps[packageName] && componentsSet.has(componentName)) {
+      resDeps[packageName] = version || 'latest'
+    }
+  }
+
+  packages.forEach((item) => {
+    const { package: packageName, version } = item
+
+    if (packageName && !resDeps[packageName]) {
+      resDeps[packageName] = version || 'latest'
+    }
+  })
 
   for (const {
     type,
@@ -37,14 +51,6 @@ const parseSchema = (schema) => {
     resDeps[packageName] = version || 'latest'
   }
 
-  const componentsSet = getComponentsSet(schema)
-
-  for (const { package: packageName, version, componentName } of componentsMap) {
-    if (packageName && !resDeps[packageName] && componentsSet.has(componentName)) {
-      resDeps[packageName] = version || 'latest'
-    }
-  }
-
   // 处理内置 Icon，如果使用了 tinyvue 组件，则默认添加 @opentiny/vue-icon 依赖，且依赖与 @opentiny/vue 依赖版本一致
   if (resDeps['@opentiny/vue']) {
     resDeps['@opentiny/vue-icon'] = resDeps['@opentiny/vue']