H5 Hybrid開發-前端資源本地化方案紀要
H5 hybrid-前端資源本地化方案紀要
- 就整個行業來說，大前端是趨勢，現階段，native方面除了一些偏CPU密集型工作與作業系統底層API方面的工作外，H5基本都可以滿足需要。
- 目前的工作更偏向前端架構多一點，除了要對FE負責，還要對整體項目以及其他部門（配合）負責。本地資源本地化方案本身就源於此。
- 在此簡要總結下個人對 Hybrid開發中 以H5為主的SPA的資源本地化方案，本方案針對於基於IOS/Android雙端Webview的Hybrid開發。
- 截止發文時間，依託於此方案的項目已穩定上線。
- 項目基於敏捷開發管理方案，並處於持續迭代中。
- 細節方面，三言兩語很難闡述清楚，在此主要簡單記錄一些方向性和思路性的問題。
方案目標/優勢
- 嚴格保證弱網或斷網情況下App的可用性。
- 在保證性能與體驗的基礎上，儘可能降低native成本。
- 提升H5流暢性體驗
- 方便快速迭代
【調研】方案可行性調研
- 前端資源所佔的高比重是否會對Native發版造成影響？
- HTTP(S)協議 轉變為 file協議後，對前端資源載入（原生載入）的影響？
- HTTP(S)協議 轉變為 file協議後，對 bridge 功能的影響（native通訊、native資源載入、HTTP(S) proxy請求）等？
- HTTP(S)協議 轉變為 file協議後，React Router的 hash模式 或 history模式功能的可用性？
- Webpack工程化對FE工作流下各場景（devServer、native devServer、build、syncDev、syncBuild、publish等）的支援程度？
【開發（首發）】注意事項 & 功能點
- 前端資源版本迭代機制？
- 前端資源的更新機制？
- 前端資源與Native資源的對應機制？
- 前端資源的加密與解密機制？
- 前端資源的線下同步、上線、回滾機制？
- bridge API 的便利性？
【迭代】持續優化
- 前端腳手架的持續優化
- splitChunkPlugin 的持續優化、資源本地化與前端資源差量更新的探索
- react-router-dom的最佳實踐（路由與組件的匹配標準化、對單個路由訂製的規範化與便利性的提升等）
- 持續的 Native 體驗優化
- react hooks 的性能優化與規範化
