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 的性能優化與規範化