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. 性能
    例如:项目运行、加载速度、图片加载优化、路由懒加载等

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

你可能感兴趣的:(重构,前端,javascript,angular)