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直接根據數據渲染，優化了用戶首屏體驗。