Optimize admin web bundle

2026-07-07 13:03:00 +08:00
parent 55b7c5b0ea
commit bcdf91c85d
6 changed files with 127 additions and 5 deletions
--- a/ai_knowledge_base_v2/apps/admin-web/src/main.ts
+++ b/ai_knowledge_base_v2/apps/admin-web/src/main.ts
@@ -1,8 +1,64 @@
-import ElementPlus from "element-plus";
-import "element-plus/dist/index.css";
+import {
+  ElButton,
+  ElCollapse,
+  ElCollapseItem,
+  ElDatePicker,
+  ElDrawer,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+  ElTabPane,
+  ElTable,
+  ElTableColumn,
+  ElTabs,
+  vLoading,
+} from "element-plus";
+import "element-plus/theme-chalk/base.css";
+import "element-plus/theme-chalk/el-button.css";
+import "element-plus/theme-chalk/el-collapse.css";
+import "element-plus/theme-chalk/el-date-picker.css";
+import "element-plus/theme-chalk/el-drawer.css";
+import "element-plus/theme-chalk/el-form.css";
+import "element-plus/theme-chalk/el-input.css";
+import "element-plus/theme-chalk/el-input-number.css";
+import "element-plus/theme-chalk/el-loading.css";
+import "element-plus/theme-chalk/el-message.css";
+import "element-plus/theme-chalk/el-option.css";
+import "element-plus/theme-chalk/el-select.css";
+import "element-plus/theme-chalk/el-switch.css";
+import "element-plus/theme-chalk/el-table.css";
+import "element-plus/theme-chalk/el-tabs.css";
 import { createApp } from "vue";

 import App from "./App.vue";
 import "./styles.css";

-createApp(App).use(ElementPlus).mount("#app");
+const app = createApp(App);
+
+[
+  ElButton,
+  ElCollapse,
+  ElCollapseItem,
+  ElDatePicker,
+  ElDrawer,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+  ElTabPane,
+  ElTable,
+  ElTableColumn,
+  ElTabs,
+].forEach((component) => {
+  app.use(component);
+});
+
+app.directive("loading", vLoading);
+app.mount("#app");
--- a/ai_knowledge_base_v2/apps/admin-web/vite.config.ts
+++ b/ai_knowledge_base_v2/apps/admin-web/vite.config.ts
@@ -3,6 +3,28 @@ import { defineConfig } from "vite";

 export default defineConfig({
  plugins: [vue()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes("node_modules")) return undefined;
+          if (id.includes("element-plus/es/components/table")) return "el-table";
+          if (
+            id.includes("/vue/") ||
+            id.includes("@vue/") ||
+            id.includes("@vueuse") ||
+            id.includes("async-validator") ||
+            id.includes("@popperjs") ||
+            id.includes("@floating-ui") ||
+            id.includes("dayjs")
+          ) {
+            return "vendor";
+          }
+          return undefined;
+        },
+      },
+    },
+  },
  server: {
    host: "127.0.0.1",
    port: 5174,
--- a/ai_knowledge_base_v2/development_records/2026-07-06-decision-register.md
+++ b/ai_knowledge_base_v2/development_records/2026-07-06-decision-register.md
@@ -34,11 +34,12 @@
 | D-011 | 阶段四外部服务默认保持 mock 开启，通过配置关闭 mock 后再走真实 provider。 | 默认采用 | 当前缺少真实飞书检索地址和模型凭证，默认 mock 可以保证开发、演示和测试连续。 |
 | D-012 | 大模型真实调用先按 OpenAI 兼容 `chat/completions` 非流式响应接入。 | 默认采用 | 先打通配置化真实模型调用和失败日志，后续再升级为模型原生流式透传。 |
 | D-013 | 管理后台开发阶段支持首次登录自动创建默认管理员。 | 默认采用 | 降低本地初始化成本；生产环境必须修改默认账号密码。 |
-| D-014 | 管理后台 Element Plus 先整体引入，后续再做按需导入优化。 | 默认采用 | 阶段五优先保证后台功能闭环和交付速度，体积优化后续处理。 |
+| D-014 | 管理后台 Element Plus 先整体引入，后续再做按需导入优化。 | 已调整 | 阶段五优先保证后台功能闭环和交付速度；已在 D-019 调整为按需注册。 |
 | D-015 | 模型管理按“OpenAI 兼容协议 + 原生协议”两类补全。 | 默认采用 | DeepSeek、通义千问兼容模式、Kimi、硅基流动、火山方舟优先走 OpenAI 兼容；Anthropic Messages、Gemini generateContent 保留原生协议适配。 |
 | D-016 | 模型配置支持 `baseUrl` 自动拼接接口，同时保留 `apiUrl` 覆盖能力。 | 默认采用 | 降低普通配置成本，同时给特殊代理网关、私有化模型和供应商非标准路径保留出口。 |
 | D-017 | 编辑模型时 API Key 留空表示保留旧密钥。 | 默认采用 | 减少密钥重复暴露，避免后台人员只改参数时误覆盖密钥。 |
 | D-018 | 模型高级参数用 JSON 对象透传。 | 默认采用 | 用较低成本兼容供应商差异，避免数据库字段无限膨胀。 |
+| D-019 | 管理后台 Element Plus 改为按需注册，并拆分表格和基础 vendor chunk。 | 默认采用 | 解决后台构建单 chunk 过大的提示，降低首屏主入口体积，同时不引入额外构建插件。 |

 ## 待确认决策

--- a/ai_knowledge_base_v2/development_records/2026-07-07-admin-web-build-optimization.md
+++ b/ai_knowledge_base_v2/development_records/2026-07-07-admin-web-build-optimization.md
@@ -0,0 +1,42 @@
+# 管理后台构建体积优化记录
+
+日期：2026-07-07
+
+## 背景
+
+模型管理补全后，管理后台 `npm run build` 可以正常通过，但 Vite 提示单个 JavaScript chunk 超过 500KB。主要原因是管理后台最初为了快速交付，采用了 `app.use(ElementPlus)` 全量注册，并引入了 Element Plus 全量样式。
+
+## 已完成
+
+- 将管理后台入口从全量 `ElementPlus` 注册改为按需注册当前页面实际使用的组件。
+- 将 `element-plus/dist/index.css` 改为按组件引入样式。
+- 在 Vite 中增加最小必要拆包策略：
+  - 表格相关模块拆为 `el-table`。
+  - Vue、Popper、VueUse、dayjs、async-validator 等基础依赖拆为 `vendor`。
+  - 其他依赖继续交给 Rollup 自动处理，避免过度拆包引入循环 chunk 提示。
+
+## 本次结果
+
+优化前：
+
+- CSS：约 361KB。
+- 主 JS：约 1008KB，gzip 后约 330KB。
+- 构建存在单 chunk 超过 500KB 提示。
+
+优化后：
+
+- CSS：约 104KB，gzip 后约 15KB。
+- `index` JS：约 237KB，gzip 后约 74KB。
+- `vendor` JS：约 182KB，gzip 后约 67KB。
+- `el-table` JS：约 175KB，gzip 后约 59KB。
+- 单 chunk 超过 500KB 的提示已消除。
+
+## 当前说明
+
+构建时仍会出现 `@vueuse/core` 依赖内部 `/* #__PURE__ */` 注释位置提示，这是 Vite/Rollup 对第三方依赖注释的提示，不影响产物可用性，也不是本项目代码导致的体积问题。
+
+## 后续建议
+
+1. 如果后台页面继续变多，可以再按路由拆包。
+2. 如果管理后台组件继续扩张，可以考虑引入自动按需导入插件，但当前阶段先不增加构建复杂度。
+3. 不建议为了消除提示简单提高 `chunkSizeWarningLimit`，除非已有明确的性能验收数据支持。
--- a/ai_knowledge_base_v2/development_records/2026-07-07-model-management-completion.md
+++ b/ai_knowledge_base_v2/development_records/2026-07-07-model-management-completion.md
@@ -112,7 +112,7 @@
 - Docker Compose 配置检查：通过。
 - `git diff --check`：通过。

-说明：管理后台构建仍有 Vite chunk size 提示，原因是当前阶段 Element Plus 整体引入，属于已记录的阶段性取舍，不影响本次功能可用性。
+说明：模型管理补全后曾出现 Vite 单 chunk 过大提示，已在 `2026-07-07-admin-web-build-optimization.md` 中完成管理后台构建体积优化。

 ## 后续建议

--- a/ai_knowledge_base_v2/development_records/README.md
+++ b/ai_knowledge_base_v2/development_records/README.md
@@ -34,4 +34,5 @@
 | `2026-07-06-phase5-admin-console.md` | 阶段五管理后台记录。 |
 | `2026-07-07-admin-chat-records-completion.md` | 管理后台聊天记录补齐记录。 |
 | `2026-07-07-model-management-completion.md` | 管理后台模型管理补全记录。 |
+| `2026-07-07-admin-web-build-optimization.md` | 管理后台构建体积优化记录。 |
 | `../test_records/2026-07-06-phase6-verification.md` | 阶段六验证记录。 |