想问一个关于 Vue 设计模式的可能不是问题的问题

[1YsX1]

最近写代码时比较想去多思考一下设计模式方面的问题，对于 Vue 开发目前有这样一个想法，希望能够有前辈进行指点。

比如我现在需要实现一个业务管理系统的客户管理功能，对于客户的列表展示，有两个页面非常接近但是又不大相同。

1.客户管理页面的客户列表

右上角可以添加新客户  
点击每一个客户，要弹出客户详情页，可以对客户信息进行修改  

2.订单管理页面的客户选择

右上角没有添加新客户
点击客户后要返回并传值给上一个页面

举得例子可能不恰当，因为一个客户列表这样的功能太小了。但是我想说的就是对于一些相对复杂的界面，两个界面的功能大体上一致，但是具体的细节上是不一样的。

对于这样的页面，我认为可能的有两种编码措施：

1.两个页面分别写在两个文件里
2.写在同一个文件里然后访问页面时进行 mode 的选择以确定跳转方式

个人是比较偏向于选择第一种方式的，我认为这样可能可以让代码更为清晰。 但是不知道这里如果对于很大的工程来说，每一个页面都是一个新的文件，会不会增大最终的 js 文件然后影响页面的速度？

希望能够有前辈进行指点，谢谢！

[Twinkle]

路由上做 code splitting，你的担忧就不存在了

[SilentDepth]

针对你提到的需求场景，要先分析两个页面的近似是来自于业务的重合还是单纯的巧合。如果是巧合，那不属于逻辑复用的场景，分开写；如果是重合业务，提取差异点，用开关状态来控制内容。

如果拆分的页面（模块）多了，页面性能影响不大（按需加载可以减少传输数据量），但工程编译时间会上升。

[1YsX1]

@Twinkle 谢谢，但是我还在思考即使用了 code splitting，如果是同一个页面，是不是下载一次就好？
因为我认为相似的页面里面，其中体积稍大的资源可能都是重复的，不同的只是一些标题，返回的 url 等一些几个字节的区别。
然后拆开的话就要把类似的页面下载两次呢？

[1YsX1]

@SilentDepth 谢谢，目前在我的理解上是不同的业务需要去调用相同的一个基本业务的页面。然后这个基本业务可能需要修改的就是 title，back,next 等信息。主体部分都是一致的。但是直观感受写在同一个文件里节省下来的一点大小与代码的可读性上来讲，好像是可以忽略不计。

[Twinkle]

@1YsX1 拆开肯定是要下两次的，还是要根据自己需求来看到底拆不拆，或者两种方式都去写一下试试。或者折中一下，ui 部分提取出一个 layout，逻辑不同的部分再做分拆，都可以试试。
ps：性能最好等写完了再做优化，不要提前规划，我是这么想的😂