阅读 454

关于一个陈年Vue项目的重构优化

都说好酒要珍藏,年份越老味道越好,那么项目的话,就要反过来了。要时常的更新迭代才能保证项目的时效性,不会太落伍于时代。就在前两个星期,我接到了公司的重构优化的需求,对象是一个很老的项目(对于前端来说)也就是两年前的项目了。


ps:本编只是讲大体是如何去做的(只是一个参考思路),没有具体实现的步骤~如果有需求,之后再补上咯~毕竟我也还是个弟弟,有什么可以改进的地方还希望大佬们多多指出~

老项目的分析

前端框架

使用的是Vue、以及Vue-cli2.0+的版本

插件分析

  • element-ui
    • 版本太老很多新的功能都没有
    • 使用不够规范
  • vue-router 项目里面不可避免的使用了 vue-router 路由功能下面是里面存在的问题
    • 路由的配置和页面的路由配置都写的一个文件里面
    • 页面路由配置已经很多,有1000+行
    • 路由的引入的方式存在问题(写的很奇怪我母鸡之前为什么要这个写)
  • axios
    • axios的配置初始化文件过多,能有将近10个文件,看了代码是因为接口有那么多
    • 项目里面还有引入 jquery 里面的 ajax 方法的
  • Vuex
    • 文件过多(很多都可以合并)
    • 书写方式不优雅

代码分析

由于这是一个公司内部的系统,所以很多同事都在上面开发过,所以代码的维护管理上面也是很困难,代码的梳理和维护成本过高,还有就是还有后台的同事也在上面进行开发(代码什么写的有些感人),说到这里并不是说我针对什么的。所以总结下来就是:

  • 代码质量不高
  • 代码很杂不利于维护
  • 代码的书写规范缺失

结论

最后决定还是从手脚架先入手,先去升级一下 vue-cli 的版本,然后再加上一些代码的自动校验,同时也要对原来老的代码都过一遍校验,之后再去优化代码,或者是插件的使用问题。这个东西不是能够一蹴而就的。

升级过程

升级 vue-cli

我选择是直接初始化一个新的项目,如果不知道怎么初始化项目的话请点击这里,直接使用最新的 vue-cli 再去把老项目里面的业务代码和其他文件都复制过来。

优化一些插件的使用

复制过来之后把一些基础的东西都先改掉,比如:main.js、app.vue 里面的东西等。之后就是路由的问题。我这里是先把路由捋了一遍,把之前的一个文件,拆分了,分成了 config.js 也就是路由的配置文件,router.js 页面路由配置文件,index.js 最终的整合输出文件,因为这个系统的业务那边还是在同步进行,所有这个 vue-router 要先优化出来,然后不仅仅是如此,后面有时间也会转成 typescript 方式书写,做成可视化路由配置最好。其余的基本就是保持不变,留着以后逐步迭代掉。

添加代码规范校验

代码的校验,是修改了 vue-cli 的校验修改为自己公司发在npm上面的包,其实就是参考了标准规则,加上了自己公司的团队的风格。大家可以参考一下哦。还有就是对之前代码的格式化之后报错简直了~且行且~~

添加 commit message 自动生成

利用 commitizen cz-customizable 这个两个插件定制自动生成commit message,来规范提交信息。因为我看了之前的提交记录真的都全是 update 。我都一脸的懵~

git commit 校验

husky lint-staged 这两个插件里面的 hooks 实现在 git commit 之前对提交的代码再次进行校验,我尝试过把上面一步跟这一步合并到一个 hooks 里面但是没有成功~

总结

现在这个项目结构,手脚架的重构算是基本上完成了,剩下里面代码的重构和优化,就等需求没有那么强烈的时候慢慢去迭代掉了。

问题

  • 线上iconfont丢失问题,因为之前是下载到项目里面的东西,现在改成了线上引入的方式,导致的这个问题,修改完代码就好了

  • 文件下载问题,因为项目转移的时候,有一个file文件夹里面的东西我给弄丢了。就导致了这个问题,还是我自己疏忽大意导致的,后来就改为线上引入的

  • 别的大问题暂时还没有遇到,欢迎交流啊~

  • 你的代码里有你读过的书和走过的路

  • 经历过才会有更好的成长

博客地址 欢迎到访

GitHub 我不要Star✨(疯狂暗示)

关注下面的标签,发现更多相似文章
评论