关于一个暴躁前端的故事＜重构Vue2项目＞

暴躁前端的故事＜重构Vue2项目＞"/>

关于一个暴躁前端的故事＜重构Vue2项目＞

公司的前端项目经历了7波人的蹂躏穿插盖被子，代码非常絮乱，依赖玩叠叠，SPA Request请求数量竟然一次请求30+，页面加载渲染超过20秒；在对静态资源做了优化和用上COS/CDN后，首页加载依然需要超过6秒的加载时长。实在忍不住了，忍无可忍，无须再忍！重构走起！(末尾附逗b代码截图)

思路

一、直接升级和先重构再升级的选择

升级一个混乱的 Vue 2 项目到 Vue 3 时，可以考虑先对 Vue 2 代码进行重构和整理，使其更加清晰和可维护。这样做的好处是，你可以更好地理解项目的结构和逻辑，并且可以在重构过程中解决一些已知的问题和缺陷。

一旦你完成了 Vue 2 代码的重构，你可以开始逐步迁移到 Vue 3。Vue 3 提供了一个官方的迁移指南来帮助你进行这个过程。你可以按照指南的步骤，逐个解决迁移问题，同时应用 Vue 3 的新特性和最佳实践。

重构和升级可以同时进行，但要注意适量掌握迁移和重构的工作量。如果重构的工作量很大，可能建议先重构 Vue 2 代码，再进行 Vue 3 的升级。这样可以确保代码质量和可维护性的提升，并减少冲突和问题的出现。

无论你选择什么方法，都建议在进行重要的更改前，备份你的代码，并逐步测试和验证每个步骤的效果。这样可以更安全地进行升级和重构，并且可以及时发现和解决问题。

开整

1. 整理目录

• 找到业务项目，然后从首页开始，逐级拆解，通过processon等工具，把业务页面结构先梳理清楚了，自行把页面都抽离出来，包括路由。（有产品原型图的可以更快速的定位到页面路由）

2. 删/合并 （每一次操作完记得编译一下，解决报错，方便后续开启ESLINT）

• 多余的文件去掉，耗时耗力，先不要动依赖文件。
• 删除多余的文件，例如 constants 和 const 其实是一个文件夹，还有很多 src/dist src/index 这类不规范的文件全部处理掉。
• 开始根据进行页面调试，删除多余的文件。
• 分析了下，页面结构有 page，components，views，都乱放有文件。
• 单独拎出来某一些页面，遵循理解代码后在修改。
• 开始改page下的文件，打算先调整页面，在改页面里面的内容，再提炼组件。
• 一共60多个文件，改page，规范命名，修改路由，修改路径，聚合在一起
• 修改assets文件，没用的图片资源全部去掉（先用VSCODE插件剔除一次，然后再自己手动剔除一下），然后剩余图片资源上TINY压缩一下。
• 修改Components文件，和上面一样，把多余的文件删掉。
• 至此初步删除合并完多余的文件。

3. 调整API文件，整合API

• 先找到Request配置文件，然后把标准的几个JS文件导入，例如报错之类请求之类的。
• 统一把所有接口文档放在一起，然后修改对应的路径以及整合页面的代码。
• 然后一个一个API去优化，最后整理成一个配置文件和一个index.js文件。
• 运行下页面，看下是否有问题；

4. SPA单页面优化

• 从上面的基础上，你基本了解了整个项目是怎么样子的了，然后从首页开始，一个个优化，拆分组件。