簡介
WEB同構應用指的是通過程式碼的編譯轉換手段(通常藉助於babel)來讓程式碼在不同端client(瀏覽器), server(伺服器)執行.同構的web應用主要有以下的優點:
- 一套程式碼多處執行減少維護成本
- 任務拆分,通過同構可以實現更多的功能(SSR, fetchData)
簡單的實現思路
- 將client端的程式碼轉換成server可以執行的程式碼(es6 => commonjs).
- 在兩端組合出一套模式相同的程式碼邏輯.下面的例子中在server和client端使用不同的react-router提供的元件.
- server端路由匹配,組裝資源(css, js, data), 可以通過不同的中介軟體根據請求資訊來組裝.
- client端路由匹配,匹配資源(data, 檢查頁面渲染結果是否正確).
過程
程式碼轉換
在進行程式碼轉換的時候,首先要明白程式碼轉換的目的才能明確對不同檔案的轉換策略.比如為了實現同構將client端的程式碼轉換成server端可以執行的程式碼,對不同型別CSS檔案的不同處理策略.通常藉助於webpack來實現程式碼的轉換功能.webpack會根據入口檔案依次的解析引用的各種檔案型別,通過配置的webpack loader可以實現對應檔案型別的轉換.以下主要從不同型別檔案處理的角度進行介紹:
javascript
轉換的目標是client端的程式碼(排除node_modules).
將client轉換成server端可以執行的程式碼
css
對於CSS可以有以下兩種的處理方法:
- css-in-js (css-loader style-loader)處理,包括node_modules,client端不需要提取的CSS
- client端全域性樣式或者通過mini-css-extract-plugin提取的樣式
程式碼轉換優化
公有程式碼提取
可以使用DllPlugin對使用的基礎元件庫進行統一的提取和引用.提取公有模組程式碼主要有以下的好處:
- 通過DllPlugin對公有程式碼的提取,能一定程度上加快webpack構建程式碼的速度
- 公有部分的邏輯相對來說是變化的較少,可以充分的利用快取
- 減少其他bundle的體積,頁面載入的資源更少
加快編譯速度
可以使用happyPack加快編譯速度,happyPack通過多程式的方式來加快程式碼的打包過程.
使用happyPack的例子:
資源匹配
靜態資源(CSS js)
可以通過webpack-manifest-plugin生成資源的位置資訊檔案,然後通過該檔案查詢資源的位置.
資源位置檔案
通過manifest查詢資源的位置
data
- server端執行匹配到元件的獲取資料的方法(返回promise),primose執行完畢獲取到最新的資料儲存.將資料通過指令碼掛載到window上的屬性上.
- client端通過window屬性的獲取,生成儲存資料. 服務端獲取資料和注入資料
client端提取資料
思考
在是否在專案中使用同構應用的時候,還是要結合具體的場景.可以有以下的幾點考慮:
- 專案中是否需要進行服務端渲染 => 使用者角度
- 是否有引入node中間層(api轉發)的必要, 其他的替代方案是否可行(nginx) => 整體設計的角度
歡迎大家關注公眾號,一起進步