From 145f745e718d4ecbc0128e7370a95144231220ff Mon Sep 17 00:00:00 2001
From: mediabot-pt <295750538+mediabot-pt@users.noreply.github.com>
Date: Mon, 29 Jun 2026 13:18:59 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=89=8D=E7=AB=AF=20Element=20Plus=20?=
 =?UTF-8?q?=E6=8C=89=E9=9C=80=E5=AF=BC=E5=85=A5=20+=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=88=86=E5=89=B2=EF=BC=8Cbundle=20=E4=BB=8E=201.18MB=20?=
 =?UTF-8?q?=E9=99=8D=E8=87=B3=20~500KB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 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            |  4 +++-
 web/src/main.js             |  8 --------
 web/src/views/Configs.vue   |  2 --
 web/src/views/Dashboard.vue |  1 -
 web/src/views/Layout.vue    |  4 ----
 web/src/views/Login.vue     |  3 ---
 web/src/views/Sites.vue     |  2 --
 web/src/views/Users.vue     |  2 --
 web/vite.config.js          | 38 ++++++++++++++++++++++++++++++++++---
 9 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/web/package.json b/web/package.json
index b43ffde..cd9d463 100644
--- a/web/package.json
+++ b/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"
   }
 }
diff --git a/web/src/main.js b/web/src/main.js
index 65d68cf..c5d424a 100644
--- a/web/src/main.js
+++ b/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')
diff --git a/web/src/views/Configs.vue b/web/src/views/Configs.vue
index ad8cb4a..a563439 100644
--- a/web/src/views/Configs.vue
+++ b/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([])
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index 2feee1c..3b77fb9 100644
--- a/web/src/views/Dashboard.vue
+++ b/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({
diff --git a/web/src/views/Layout.vue b/web/src/views/Layout.vue
index c4d2297..5c0420f 100644
--- a/web/src/views/Layout.vue
+++ b/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')
 
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 5169e97..7a31612 100644
--- a/web/src/views/Login.vue
+++ b/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()
diff --git a/web/src/views/Sites.vue b/web/src/views/Sites.vue
index 1660009..6954562 100644
--- a/web/src/views/Sites.vue
+++ b/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([])
diff --git a/web/src/views/Users.vue b/web/src/views/Users.vue
index 8358d5c..5887435 100644
--- a/web/src/views/Users.vue
+++ b/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([])
diff --git a/web/vite.config.js b/web/vite.config.js
index 7cf6b38..cce6b62 100644
--- a/web/vite.config.js
+++ b/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'
+          }
+        },
+      },
+    },
+  },
 })