做了什么
- 用 Composition API 抽取公共逻辑为 Hooks，代码复用率提升 40%
- Vite 替代 Webpack 并开启 Gzip，首屏加载从 3s+ 降到 1s 以内
- 定制 Element Plus 主题变量，统一整站视觉规范
- 响应式适配 PC / 平板 / 手机三端
背景
原站点是若干年前建的，技术栈老、构建慢、移动端基本没适配。重构目标有三个：性能要能看、代码要能维护、三端都要能用。
做了什么
复用率提升 40%
原代码把大量逻辑直接写在页面组件里，列表查询、分页、表单校验这些几乎每个页面都要抄一遍。改用 Composition API 把这些抽成 Hooks —— useTable、useForm、usePagination 之类 —— 页面只声明自己要什么，实现细节收敛到一处。
结果是复用率提升 40%，更实际的好处是改一处就全站生效，不用再去各个页面里翻同样的 bug。
首屏从 3s+ 到 1s 内
构建链路从 Webpack 换成 Vite，同时开启 Gzip 压缩。开发时的冷启动和热更新速度提升很明显，产物体积也降下来了，首屏加载时间从 3s 以上降到 1s 以内。
主题定制与响应式
Element Plus 的默认主题和站点原有的视觉规范不一致，通过覆写 CSS 变量统一了配色、圆角和字体，避免满屏 !important。
响应式部分按断点分别处理 PC / 平板 / 手机三端，重点是移动端的导航折叠和表格展示形态。
想法
重构项目的风险不在技术选型，而在范围失控 —— 很容易从「重构」变成「重写」，最后既没按时交付，还引入一堆原站点没有的 bug。这次的做法是先把不能动的边界划清楚（URL 结构、对外接口、既有数据），其余部分再谈优化。