优化打包结构

package.json

@@ -19,6 +19,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
+    "unplugin-auto-import": "^0.18.5",
+    "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.10"
   }
 }

src/App.vue

@@ -7,7 +7,7 @@ import '@logicflow/extension/lib/style/index.css'
 import "@logicflow/core/lib/style/index.css";
 import X2JS from "x2js";
 import {ElMessage} from "element-plus";
-import { saveAs } from 'file-saver';
+import {saveAs} from 'file-saver';
 import vkbeautify from 'vkbeautify';
 
 const upload = ref(null);
@@ -395,8 +395,8 @@ const handleUploadRemove = () => {
 <template>
   <div class="container"></div>
   <div>
-    <ElButton type="primary" @click="onButtonClick">生成xml</ElButton>
+    <el-button type="primary" @click="onButtonClick">生成xml</el-button>
-    <ElButton @click="state.loadXMLFormVisible = true">读取xml</ElButton>
+    <el-button @click="state.loadXMLFormVisible = true">读取xml</el-button>
   </div>
 
   <el-dialog v-model="state.descriptionDialogFormVisible" width="800" align-center>

src/main.js

@@ -1,10 +1,8 @@
-import { createApp } from 'vue'
+import {createApp} from 'vue'
 import './style.css'
 import App from './App.vue'
-import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import "@logicflow/core/dist/index.css";
 
 createApp(App)
-    .use(ElementPlus)
     .mount('#app')

vite.config.js

@@ -1,7 +1,38 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+      vue(),
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+          resolvers: [ElementPlusResolver()],
+      })
+  ],
+    build: {
+      rollupOptions: {
+          output: {
+              manualChunks(id ) {
+                  if (id.includes('element-plus')) {
+                      return 'render-ui'
+                  }
+                  if (id.includes('lodash-es')) {
+                      return 'render-lodash'
+                  }
+                  if (id.includes('logicflow')) {
+                      return 'render-logicflow'
+                  }
+                  if (id.includes('node_modules')) {
+                      return 'render-function'
+                  }
+              }
+          }
+      }
+    }
 })