web重构之路

518 阅读4分钟

####以前网站开发存在的痛点

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直接根据数据渲染,优化了用户首屏体验。