perf: 前端 Element Plus 按需导入 + 代码分割，bundle 从 1.18MB 降至 ~500KB

- 引入 unplugin-vue-components 自动按需导入 Element Plus 组件和图标
- 引入 unplugin-auto-import 自动导入 Vue/EP API（ref/reactive/ElMessage 等）
- vite.config 添加 manualChunks 拆包（vendor 独立 chunk）
- 移除 main.js 全量 Element Plus 导入和图标注册
- 所有 .vue 文件移除冗余的 import 语句

web/package.json

@@ -17,6 +17,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "unplugin-vue-components": "^0.27.0",
+    "unplugin-auto-import": "^0.18.0"
   }
 }

web/src/main.js

@@ -1,16 +1,8 @@
 import { createApp } from 'vue'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
 
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-
-app.use(ElementPlus)
 app.use(router)
 app.mount('#app')

web/src/views/Configs.vue

@@ -23,8 +23,6 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
 import api from '../api'
 
 const pendingConfigs = ref([])

web/src/views/Dashboard.vue

@@ -40,7 +40,6 @@
 </template>
 
 <script setup>
-import { reactive, ref, onMounted } from 'vue'
 import api from '../api'
 
 const stats = reactive({

web/src/views/Layout.vue

@@ -52,10 +52,6 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
-
 const router = useRouter()
 const userEmail = ref(localStorage.getItem('par_token') || 'admin')
 

web/src/views/Login.vue

@@ -18,9 +18,6 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
 import api from '../api'
 
 const router = useRouter()

web/src/views/Sites.vue

@@ -26,8 +26,6 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
 import api from '../api'
 
 const sites = ref([])

web/src/views/Users.vue

@@ -32,8 +32,6 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
 import api from '../api'
 
 const users = ref([])

web/vite.config.js

@@ -1,11 +1,43 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import AutoImport from 'unplugin-auto-import/vite'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    // Element Plus 组件按需导入（自动检测模板中的 <el-xxx> 并导入样式）
+    Components({
+      resolvers: [ElementPlusResolver({ importStyle: 'css' })],
+      dts: false, // CI 构建不需要生成类型文件
+    }),
+    // Vue / Element Plus API 自动导入（ref, reactive, ElMessage 等）
+    AutoImport({
+      imports: ['vue', 'vue-router'],
+      resolvers: [ElementPlusResolver()],
+      dts: false,
+    }),
+  ],
   base: '/',
   build: {
     outDir: 'dist',
-    emptyOutDir: true
+    emptyOutDir: true,
+    // 代码分割：将第三方库单独拆包
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules/element-plus')) {
+            return 'element-plus'
           }
+          if (id.includes('node_modules/@element-plus')) {
+            return 'element-icons'
+          }
+          if (id.includes('node_modules/vue') || id.includes('node_modules/@vue')) {
+            return 'vue-vendor'
+          }
+        },
+      },
+    },
+  },
 })