微信钱包中58到家首页为什么这么快

原文标题《前后端分离和模块化-58到家微信首页重构之路》【深度前端干货】

微信钱包内的58到家全新首页已经上线，感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。

58到家全新首页提出重构主要是为了解决以下问题：

1. 1、每个城市开通的服务项目不同，有些内容是写死在tpl中，维护非常头疼；
2. 2、开通新服务或者某些UI调整（比如更换服务项的图片造成更改雪碧图）时必须走代码上线流程；
3. 3、原有的前端切图、后端写逻辑的开发模式造成开发周期拉长和上线流程繁琐；
4. 4、原有配置后台操作复杂，且可配置细节不完善；
5. 5、首页加载速度太慢，用户体验欠佳。

58到家目前两年左右的发展期，整个技术生态还不完善。以上的问题有的是由于创业初期遗留的历史原因造成，比如代码写死和粗糙的配置后台；而有的问题是由落后的开发模式和协作模式造成的，比如前后端分工不明确、首页加载速度慢。

基于上文提到的问题，重构从以下几方面入手：

1. 1、完善配置后台，细化可配置项；
2. 2、数据驱动UI，轻量化tpl，内容更新无需上线流程；
3. 3、前后端分离，缩短开发周期，简化上线流程；
4. 4、模块化开发，提高加载速度，同事增强代码的可维护性。

配置后台可以理解为一个简易的CMS系统，配置的内容是一些量化的字段，比如图片地址、链接、价钱等等。此项目中本人并不负责配置后台的开发，所以不再班门弄斧。

下面详细描述重构过程中前端的解决方案。

1. 技术选型

根据上文提到的问题，此项目中前端的技术选型如下：

• 客户端（浏览器）
• • 使用Vue作为渲染框架（数据驱动UI）；
  • 图片懒加载使用Vue-lazyload实现；
  • 模块化方案使用CommonJS；
  • 因为首页没有很多的用户交互功能，大部分是链接跳转，所以不使用第三方的touch event工具；
• 开发环境
• • 使用58到家前端工程框架boi作为开发和构建工具；

看到以上的技术选型，可能会有读者疑惑：不就是一个前端模板+模块化方案吗，有什么值得介绍呢？

首先，以上的技术选型的背景如下：

1. 1、目前58到家FE团队统一使用vue作为开发框架，组件易复用；
2. 2、此次重构后的58到家首页并非SPA，选用vue的另外一个原因是为了后续的SPA化做预备；
3. 3、客户端渲染html的缺点是首次进入页面加载较慢，但利用浏览器缓存机制可以另再次进入页面的加载时间大大缩短；
4. 4、选用CommonJS实现按需加载（load on demand），首屏以外的内容在首屏渲染完成之后加载；
5. 5、boi是58到家前端工程框架，以webpack为构建内核，选用CommonJS另一个原因是webpack的原生支持。

2. 前后端分离方案

目前58到家的前后端协作模式仍然很原始，本次重构采用的前后端分离方案并非是最优解，只能算是一种折中的过渡方案。总结有以下几点：

1. 1、初始tpl中包含以下部分：

• js、css引用；
• 页面初始数据；
• vue组件容器；
• 统计用初始数据。