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