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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • 以前网站开发存在的痛点 1.部署生产环境时间长2.开发需要开虚拟机(asp.net必须运行在window平台)3....
    ezbuy研发阅读 1,041评论 1 6
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,454评论 25 707
  • 小时候旅行就是出远门。慢慢长大就是一个城市呆够了去另外一个城市。来到你的城市,走过你来时的路,看过你未看的风景。 ...
    茜爱兔子牙阅读 440评论 0 0
  • 这个换季的季节,衣柜里的衣服也该换了,买买买,成了菇凉们近期最频繁的活动。然而,在更新衣柜的时候,少盲目,入手的衣...
    迪儿的神奇魔力屋阅读 837评论 0 3
  • 文/小纯姐姐 一个7岁的孩子,连续几天早晨醒来的第一句话是:“妈妈,我好想爸爸,爸爸怎么不在我身边?”尽管她的爸爸...
    小纯姐姐阅读 382评论 4 1