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 的性能优化与规范化

版权声明：本文为pomelott原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/pomelott/p/14697687.html