Angular前端项目重构

随着项目越来越庞大，而且基础没有打好，导致项目问题多多，最近也是接到个大活，就是把前端项目重构一遍，当然这是一个长期的工作，既然有这个想法也给了我这次机会，那就要着手办了。

第一步项目梳理

首先针对要重构的项目做一个结构、功能、页面关系梳理。
我用XMind针对页面分模块画了一个结构图，从大方向往里看，结构图整理好之后，又整理了页面的功能关系图，这样再来看项目的时候就很清晰，知道如何进行下一步的规划。
在梳理的过程中也发现了很多问题，也整理了下来，为之后的重构做好准备。

整理的项目问题

1. 体量大
   路由懒加载模块及大文件组件里面存在大量的历史遗留、冗余、无效代码，历史包袱重，而且依赖混乱，无法安全清理

2. 耦合严重
   大部分项目代码严重过程化，未进行拆分组合等操作，导致文件越来越大，逻辑越来越乱。

3. 性能问题
   项目加载慢、执行慢。

4. 开发麻烦、维护风险高
   开发时需要检查主仓库更新，检查依赖更新，还需注意项目的版本、冲突、依赖更新等。

5. 升级成本高
   开发环境无法安全升级，由于所有依赖都是全项目共享，升级会直接影响到子项目，导致不能随意变动。

6. 开发规范
   由于开发各自代码风格不同，导致每个人写的代码样子千差万别，这也给代码Review带来困难，所以需要统一代码风格，为以后打下基础。

第二步重构思路

对于前期整理的项目问题，以及同事提出的改进意见，产出了下一步的重构规划。

开发规范

1. 环境规范：包括nodejs版本，编辑器，编辑器默认配置等
2. HTML / Template编码规范
3. CSS / Less编码规范
4. JavaScript / TypeScript编码规范
5. Angular编码规范
6. 前端开发流程

项目架构

1. 前端框架选择
   因为公司项目都是Angular项目，所以还是继续使用Angular

2. 目录结构
   例如：SharedModule 、Components、Views等。
   目标：模块化、结构清晰。

3. 封装
   例如：http、权限系统、公共样式、公共逻辑、公共组件等。
   目标：扩展性高，耦合性低，体量小。

4. 第三方库
   例如：UI框架、CSS预处理语言、绘图工具
   目标：考虑移动端展示，但不做完全兼容。

5. 增加测试相关
   例如：服务测试、组件测试等

6. 性能
   例如：项目运行、加载速度、图片加载优化、路由懒加载等

接下来就是按模块细分，一步一步重构，当然前期考虑的只是一部分，有些东西还是需要实际重构的过程中去发现问题，改进项目，优化项目，重构是一个有趣的事情，如果你现在负责这个事情，还是不能心急，要多方面考虑，但是这个东西毕竟没有完美答案，适合自己公司的才是最好的。