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