随着项目越来越庞大,而且基础没有打好,导致项目问题多多,最近也是接到个大活,就是把前端项目重构一遍,当然这是一个长期的工作,既然有这个想法也给了我这次机会,那就要着手办了。
第一步项目梳理
首先针对要重构的项目做一个结构、功能、页面关系梳理。
我用XMind针对页面分模块画了一个结构图,从大方向往里看,结构图整理好之后,又整理了页面的功能关系图,这样再来看项目的时候就很清晰,知道如何进行下一步的规划。
在梳理的过程中也发现了很多问题,也整理了下来,为之后的重构做好准备。
整理的项目问题
-
体量大
路由懒加载模块及大文件组件里面存在大量的历史遗留、冗余、无效代码,历史包袱重,而且依赖混乱,无法安全清理 -
耦合严重
大部分项目代码严重过程化,未进行拆分组合等操作,导致文件越来越大,逻辑越来越乱。 -
性能问题
项目加载慢、执行慢。 -
开发麻烦、维护风险高
开发时需要检查主仓库更新,检查依赖更新,还需注意项目的版本、冲突、依赖更新等。 -
升级成本高
开发环境无法安全升级,由于所有依赖都是全项目共享,升级会直接影响到子项目,导致不能随意变动。 -
开发规范
由于开发各自代码风格不同,导致每个人写的代码样子千差万别,这也给代码Review带来困难,所以需要统一代码风格,为以后打下基础。
第二步重构思路
对于前期整理的项目问题,以及同事提出的改进意见,产出了下一步的重构规划。
开发规范
- 环境规范:包括nodejs版本,编辑器,编辑器默认配置等
- HTML / Template编码规范
- CSS / Less编码规范
- JavaScript / TypeScript编码规范
- Angular编码规范
- 前端开发流程
项目架构
-
前端框架选择
因为公司项目都是Angular项目,所以还是继续使用Angular -
目录结构
例如:SharedModule 、Components、Views等。
目标:模块化、结构清晰。 -
封装
例如:http、权限系统、公共样式、公共逻辑、公共组件等。
目标:扩展性高,耦合性低,体量小。 -
第三方库
例如:UI框架、CSS预处理语言、绘图工具
目标:考虑移动端展示,但不做完全兼容。 -
增加测试相关
例如:服务测试、组件测试等 -
性能
例如:项目运行、加载速度、图片加载优化、路由懒加载等
接下来就是按模块细分,一步一步重构,当然前期考虑的只是一部分,有些东西还是需要实际重构的过程中去发现问题,改进项目,优化项目,重构是一个有趣的事情,如果你现在负责这个事情,还是不能心急,要多方面考虑,但是这个东西毕竟没有完美答案,适合自己公司的才是最好的。