####以前網(wǎng)站開發(fā)存在的痛點(diǎn)

1.部署生產(chǎn)環(huán)境時(shí)間長 2.開發(fā)需要開虛擬機(jī)(asp.net必須運(yùn)行在window平臺(tái)) 3.陳舊的前端代碼不好維護(hù) 4.加載速度優(yōu)化(首屏渲染體驗(yàn))

以上的幾點(diǎn)“痛”，是ezbuy網(wǎng)站以前開發(fā)存在的幾個(gè)問題。網(wǎng)站在重構(gòu)的過程中，主要也就是解決這些問題做的一些改進(jìn)。 首先，前端的確定的技術(shù)選型是webpack + react + redux，這也是行業(yè)很多公司采用的方案，就不在此做多余的技術(shù)優(yōu)勢(shì)說明。我們前端和后端的配合完全使用API文檔，JS代碼中請(qǐng)求api的代碼都根據(jù)api文檔自動(dòng)生成，調(diào)用api就只需要import對(duì)應(yīng)的service，生成代碼使用的工具tgen是ezbuy自己開發(fā)的生成工具。 前端能夠處理的問題盡量放在前端，比如頁面所有內(nèi)容的渲染，甚至是部分的SEO信息。存在的和業(yè)務(wù)相關(guān)的部分也由數(shù)據(jù)驅(qū)動(dòng)完成，也就脫離了以往asp.net的那一套模式(即razor模板開發(fā))，實(shí)現(xiàn)前后端分離的開發(fā)方式。 相關(guān)網(wǎng)站: webpack react redux tgen

技術(shù)選型和開發(fā)方式，使前端開發(fā)告別了原有的開發(fā)方式，新的頁面都使用react開發(fā)，截止目前，前端70%左右的頁面已經(jīng)是react化的頁面，還有很多的頁面正在一步步改進(jìn)中，陳舊的代碼維護(hù)成本變得越來越低。另外，前端小組某某咖開發(fā)了一個(gè)chrome插件，可以實(shí)現(xiàn)開發(fā)時(shí)請(qǐng)求的靜態(tài)資源map使用本地文件，開發(fā)和維護(hù)react的頁面時(shí)，僅需要開啟構(gòu)建的webpack + chrome插件就可以快速開發(fā)網(wǎng)站。 其次，以往網(wǎng)站是asp.net開發(fā)，部署生產(chǎn)環(huán)境會(huì)有一個(gè)很長的過程，大概就是：

過程一般都是1個(gè)小時(shí)左右，緊急修改html或是文字，都需要把以上的流程重新走一遍, ezbuy搞活動(dòng)的時(shí)候，產(chǎn)品大大們經(jīng)常會(huì)說，某某某你那個(gè)banner或是文案什么的上線了沒有啊？boss等到促銷呢! 。。。以前的發(fā)布，等待就是那么漫長。不過現(xiàn)在好了，只要是我們r(jià)eact化的的頁面，發(fā)布只需要2min，對(duì)！就是這么短的時(shí)間。code測(cè)試通過并且合并到master，僅需要執(zhí)行命令make publish，1min打包完畢，然后，就是需要你確認(rèn)一下是否發(fā)布，確認(rèn)好了，30s內(nèi)就會(huì)部署到生產(chǎn)環(huán)境。是不是很快啦？ 具體實(shí)現(xiàn)主要是兩個(gè)方面的優(yōu)化： 1. 部署到線上的網(wǎng)站有個(gè)動(dòng)態(tài)load靜態(tài)資源的機(jī)制 2. 靜態(tài)資源自動(dòng)部署到CDN

動(dòng)態(tài)load靜態(tài)資源，就是將靜態(tài)資源的map文件放在CDN上面且不做緩存，頁面中的js在每次加載頁面時(shí)，會(huì)根據(jù)map加載對(duì)應(yīng)的靜態(tài)資源文件，map變化了，頁面的內(nèi)容也就會(huì)跟著變化，可以理解，更新一次map文件，就是一次部署。自動(dòng)部署靜態(tài)資源這個(gè)就很簡單了，github、gitlab都是支持webhook的，配置一下就可以實(shí)現(xiàn)。 最后，網(wǎng)站的加載速度也是很重要的，ebzuy前端的所有靜態(tài)資源都是放在cdn上，主要是亞馬遜和七牛，靜態(tài)資源的有效期設(shè)置時(shí)間也是比較長，用戶加載了一次, 下次就可以從緩存中拿，提高了頁面的加載速度。另外，頁面的首屏渲染問題，用戶訪問頁面，第一眼看到的內(nèi)容，不能加載太長時(shí)間，api請(qǐng)求會(huì)有個(gè)漫長的反應(yīng)時(shí)間，為了解決這個(gè)問題，我們會(huì)將首屏的api數(shù)據(jù)內(nèi)容交給后端來做請(qǐng)求，每次用戶訪問的頁面，首屏的數(shù)據(jù)都是跟著模板返回來的，js直接根據(jù)數(shù)據(jù)渲染，優(yōu)化了用戶首屏體驗(yàn)。

總結(jié)

以上是生活随笔為你收集整理的web重构之路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。