# 管理后台构建体积优化记录

日期：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`，除非已有明确的性能验收数据支持。
