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'
+          }
+        },
+      },
+    },
+  },
 })