如何構建一個WEB同構應用

簡介

　　WEB同構應用指的是經過代碼的編譯轉換手段(一般藉助於babel)來讓代碼在不一樣端client(瀏覽器), server(服務器)運行.同構的web應用主要有如下的優勢:

1. 一套代碼多處運行減小維護成本
2. 任務拆分,經過同構能夠實現更多的功能(SSR, fetchData)  

簡單的實現思路

1. 將client端的代碼轉換成server能夠執行的代碼(es6 => commonjs).
2. 在兩端組合出一套模式相同的代碼邏輯.下面的例子中在server和client端使用不一樣的react-router提供的組件. 
3. server端路由匹配,組裝資源(css, js, data), 能夠經過不一樣的中間件根據請求信息來組裝.
4. client端路由匹配,匹配資源(data, 檢查頁面渲染結果是否正確).

過程

代碼轉換

　　在進行代碼轉換的時候,首先要明白代碼轉換的目的才能明確對不一樣文件的轉換策略.好比爲了實現同構將client端的代碼轉換成server端能夠運行的代碼,對不一樣類型CSS文件的不一樣處理策略.一般藉助於webpack來實現代碼的轉換功能.webpack會根據入口文件依次的解析引用的各類文件類型,經過配置的webpack loader能夠實現對應文件類型的轉換.如下主要從不一樣類型文件處理的角度進行介紹:

javascript

轉換的目標是client端的代碼(排除node_modules). 將client轉換成server端能夠運行的代碼 

css

對於CSS能夠有如下兩種的處理方法:

1. css-in-js (css-loader style-loader)處理,包括node_modules,client端不須要提取的CSS
2. client端全局樣式或者經過mini-css-extract-plugin提取的樣式

代碼轉換優化

公有代碼提取

可使用DllPlugin對使用的基礎組件庫進行統一的提取和引用.提取公有模塊代碼主要有如下的好處:

1. 經過DllPlugin對公有代碼的提取,能必定程度上加快webpack構建代碼的速度
2. 公有部分的邏輯相對來講是變化的較少,能夠充分的利用緩存
3. 減小其餘bundle的體積,頁面加載的資源更少
   

   
   

加快編譯速度

可使用happyPack加快編譯速度,happyPack經過多進程的方式來加快代碼的打包過程. 使用happyPack的例子: 

資源匹配

靜態資源(CSS js)

能夠經過webpack-manifest-plugin生成資源的位置信息文件,而後經過該文件查找資源的位置. 資源位置文件 

經過manifest查找資源的位置 

data

1. server端執行匹配到組件的獲取數據的方法(返回promise),primose執行完畢獲取到最新的數據儲存.將數據經過腳本掛載到window上的屬性上.
2. client端經過window屬性的獲取,生成存儲數據. 服務端獲取數據和注入數據 
   client端提取數據 

   
   

思考

在是否在項目中使用同構應用的時候,仍是要結合具體的場景.能夠有如下的幾點考慮:

1. 項目中是否須要進行服務端渲染 => 使用者角度
2. 是否有引入node中間層(api轉發)的必要, 其餘的替代方案是否可行(nginx) => 總體設計的角度

                                            

                                                  歡迎你們關注公衆號,一塊兒進步