web重构之路

以前网站开发存在的痛点

1.部署生产环境时间长

2.开发需要开虚拟机(asp.net必须运行在window平台)

3.陈旧的前端代码不好维护

4.加载速度优化(首屏渲染体验)

---

以上的几点“痛”，是ezbuy网站以前开发存在的几个问题。网站在重构的过程中，主要也就是解决这些问题做的一些改进。

首先，�前端的确定的技术选型是webpack + react + redux，这也是行业很多公司采用的方案，就不在此做多余的技术优势说明。我们前端和后端的配合完全使用API文档，JS代码中请求api的代码都根据api文档自动生成，调用api就只需要import对应的service，生成代码使用的工具tgen是ezbuy自己开发的生成工具。 前端能够处理的问题尽量放在前端，比如页面所有内容的渲染，甚至是部分的SEO信息。存在的和业务相关的部分也由数据驱动完成，也就脱离了以往asp.net的那一套模式(即razor模板开发)，实现前后端分离的开发方式。

相关网站:

webpack

react

redux

tgen

技术选型和开发方式，使前端开发告别了原有的开发方式，新的页面都使用react开发，截止目前，前端70%左右的页面已经是react化的页面，还有很多的页面正在一步步改进中，陈旧的代码维护成本变得越来越低。另外，前端小组某某咖开发了一个chrome插件，可以实现开发时请求的静态资源map使用本地文件，开发和维护react的页面时，仅需要开启构建的webpack + chrome插件就可以快速开发网站。

其次，以往网站是asp.net开发，部署生产环境会有一个很长的过程，大概就是：

过程一般都是1个小时左右，紧急修改html或是文字，都需要把以上的流程重新走一遍, ezbuy搞活动的时候，产品大大们经常会说，某某某你那个banner或是文案什么的上线了没有啊？boss等到促销呢! 。。。以前的发布，等待就是那么漫长。不过现在好了，只要是我们react化的的页面，发布只需要2min，对！就是这么短的时间。code测试通过并且合并到master，仅需要执行命令make publish，1min打包完毕，然后，就是需要你确认一下是否发布，确认好了，30s内就会部署到生产环境。是不是很快啦？

具体实现主要是两个方面的优化：

1. 部署到线上的网站有个动态load静态资源的机制

2. 静态资源自动部署到CDN

动态load静态资源，就是将静态资源的map文件放在CDN上面且不做缓存，页面中的js在每次加载页面时，会根据map加载对应的静态资源文件，map变化了，页面的内容也就会跟着变化，可以理解，更新一次map文件，就是一次部署。自动部署静态资源这个就很简单了，github、gitlab都是支持webhook的，配置一下就可以实现。

最后，网站的加载速度也是很重要的，ebzuy前端的所有静态资源都是放在cdn上，主要是亚马逊和七牛，静态资源的有效期设置时间也是比较长，用户加载了一次, 下次就可以从缓存中拿，提高了页面的加载速度。另外，页面的首屏渲染问题，用户访问页面，第一眼看到的内容，不能加载太长时间，api请求会有个漫长的反应时间，为了解决这个问题，我们会将首屏的api数据内容交给后端来做请求，每次用户访问的页面，首屏的数据都是跟着模板返回来的，js直接根据数据渲染，优化了用户首屏体验。