1. 問題由來
在移動互聯網電商領域，運營每天需要搭建多個促銷頁面來吸引用戶去點擊去購買，一開始程序員臨時寫個新頁面去實現，可這些頁面可以用幾次就不用了，每次創建新頁面去實現費時費力，而且，電商的運營需求是快速迭代的，每次去頁面代碼里去改，然后上線也太不方便了。所以產品提出了Diy 頁面----配置web組件去搭建頁面，事先定好頁面可能到用到哪些的組件，然后運營在后台選好頁面由哪些組件組成，然后分別去配置對應的組件數據，這樣運營可以快速地去創建他們所需要的頁面，快速響應需求變化。所以Diy 頁面能很好地解決電商運營的復雜而快速的需求變動。
2. Diy 頁面初期解決方案
每個組件由模板文件（tpl），JS文件和css文件組成，在頁面通過Ajax獲取頁面數據，通過Require JS按需加載頁面所需要的組件內容，然后面前端渲染生成對應的組件html並執行相應JS方法，這種解決方案雖然滿足了運營的需求，但頁面性能不是很高，用戶訪問時等待時間有點長，所以必須提高頁面響應速度。
這種解決方案下頁面響應慢產生的原因：
- 通過Require JS按需加載頁面所需要的組件內容，雖然請求的內容是壓縮過的，但會產生過多的Http請求，每生成一個http請求是比較消耗資源的，但又不能把所有組件合並到一個文件中，因為組件會很多，合並會生成一個很大很大文件，理想的狀態是請求一個按需加載合並后的文件，使用combo方式。
- 頁面數據接口，返回數據很大，此Ajax請求在頁面所有請求中是最耗時的，雖然服務端對接口做了緩存，但還是覺得返回數據很大，可以試着優化下接口數據結構。
- 前端通過JS模板引擎生成html，這需要消耗點資源，而且這種diy頁面基本上都是內容展示型頁面，也就是生成完之后頁面內容不會再變動了，所以在前端通過JS模板引擎生成html可以換成在服務端生成html來提高頁面響應速度。
基於上述原因的分析，改進后的方案最好是可以在服務端渲染web組件。
3. Diy頁面服務端渲染解決方案
對於前端工程師來說要服務端去渲染頁面，在不熟悉服務端語言的情況下是一個很大挑戰，幸虧技術發展很快，出現了Node可以用Javascript去寫服務端，自己動手豐衣足食。
NodeJs現在發展已經很成熟了，所以使用node不用擔心出現什么問題。
實現方式如下 :
- Web服務器根據請求頁面pageId，在內部通過http代理從數據接口層獲取到頁面配置源數據;
- 然后根據獲取到的數據，找到對應組件模板（tpl）,使用服務端模板引擎生成對應的組件實例化的html，同時生成此頁面的JS和CSS訪問url，動態拼接整個頁面html，並返回給用戶
- 用戶獲取到頁面后，只發一個組件css請求和一個組件js請求，瀏覽器就可以直接渲染展現了。
整體過程如下：
此方案優點：
1． 大量減少組件相關的http請求，把js，或css合並為一個請求。
2． 在服務端代理請求數據接口層比用戶端去訪問數據接口層要快很多；
3． 服務端渲染生成頁面html，方便SEO，更方便后期做頁面靜態化，進一步提升頁面性能。
個人寫了一個demo放在github上，有興趣的人可以看下，代碼還在繼續完善中，地址 https://github.com/hskww/Ncomponents/
源碼說明：
代碼基於node的thinkjs框架，個人認為thinkjs真的不錯，大家比較熟悉的MVC模式，thinksjs送給前端開發人員大大的福利，訪問thinkjs https://thinkjs.org/。
源碼使用步驟：
1. 安裝node；
2. 安裝thinkjs ,npm install thinkjs@2 -g --verbose,如果慢可以使用 npm install thinkjs@2 -g --registry=https://registry.npm.taobao.org --verbose；
3. 安裝依賴 npm install；
4. 運行程序 npm start；
源碼中的combo接口是個人自己實現的，當然這個combo大家也可以用外面成熟combo的方案；模板選擇了Nunjunks,功能強大的模板引擎（http://mozilla.github.io/nunjucks/），當然也可以選擇ejs，ejs可以在模板中直接使用全局函數，而Nunjunks需要事先注冊，有興趣的朋友可以根據業務自己來選擇。
Css使用sass開發，使用gulp來編譯和壓縮js和css文件，combo接口只來合並相關文件，在node層，對js和css的文件做了一個緩存，然后加Expires頭，盡量利用瀏覽器緩存。
對於node層的緩存，在生產環境中，上線時可以手動更新這些js和css緩存，讓用戶每次訪問都是從緩存中取數據。