diff --git a/ai_knowledge_base_v2/apps/admin-web/src/main.ts b/ai_knowledge_base_v2/apps/admin-web/src/main.ts index 7dae774..8dde85c 100644 --- 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"); diff --git a/ai_knowledge_base_v2/apps/admin-web/vite.config.ts b/ai_knowledge_base_v2/apps/admin-web/vite.config.ts index 7f14175..ce352a0 100644 --- 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, diff --git 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 index c521007..afed655 100644 --- 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 过大的提示，降低首屏主入口体积，同时不引入额外构建插件。 | ## 待确认决策 diff --git 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 new file mode 100644 index 0000000..402ba75 --- /dev/null +++ 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`，除非已有明确的性能验收数据支持。 diff --git 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 index 1262881..03c56bd 100644 --- 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` 中完成管理后台构建体积优化。 ## 后续建议 diff --git a/ai_knowledge_base_v2/development_records/README.md b/ai_knowledge_base_v2/development_records/README.md index 792168d..b94f462 100644 --- 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` | 阶段六验证记录。 |