大前端跨平台开发和持续交付实践-徐帅-喜马拉雅FM

主要分享H5优化、RN加速、移动持续交付、服务开发
展开查看详情

1.⼤大前端跨平台开发和持续交付实践 徐帅 喜⻢马拉雅技术中⼼心

2. ⾃自我介绍 • 现任喜⻢马拉雅跨平台移动开发经理理⼀一职 • TCL&ALCATEL mobile rd & integration • 腾讯MIG移动应⽤用开发 • 百度上研移动应⽤用开发

3. 提纲 H5优化 RN加速 移动持续交付 服务开发

4. 收获 • 项⽬目实践 • ⽤用户体验 • 成果反馈

5. 为什什么做跨平台开发 • 模块解耦 • 功能灰度 • 业务传播 • 开发成本

6. H5优化 • 演进 VasSonic OfflineResource H5 • ⾸首屏 • 资源 • 权限 Hybrid DNSProxy • 降级

7. H5优化 • 演进 ⻚页⾯面加载 • ⾸首屏 冷启动 • 资源 • 权限 离线资源 • 降级

8. H5优化 • 演进 • ⾸首屏 • 资源 • 权限 • 降级

9. H5优化 • 演进 • ⾸首屏 • 资源 • 权限 • 降级

10. H5优化 • 演进 • ⾸首屏 访问权限配置 • 资源 调⽤用权限校验 • 权限 • 降级

11. H5优化 • 演进 • ⾸首屏 主动降级 • 资源 被动降级 • 权限 权限不不降级 • 降级

12. RN加速 { 10.js { 1.js 22.js { • 分包 } 2.js … Rn modules … base.bundle { • 资源 Rn modules Bundle Third modules Biz modules • • 缓存池 成绩 Biz modules { 10001.js 10002.js … { 10003.js 22.js … } biz.bundle

13. RN加速 <10000 >10000 • 分包 Abiz.bundle 资源 { • Biz.bundle base.bundle + … • 缓存池 Nbiz.bundle • 成绩

14. RN加速 加载顺序 • 分包 • 资源 不不同⽬目录加载 缓存池 • 附带资源加载 • 成绩 独⽴立更更新

15. RN加速 • 分包 • 资源 NI RN框架初始化 fetch + js render native render • 缓存池 1. load js 2. js init core • 成绩 3. require

16. RN加速 • 分包 • 资源 • 缓存池 • 成绩

17. RN加速 • 分包 15个模块 • 资源 Android 593 ms • 缓存池 • 成绩 iOS 354 ms

18. 移动端持续交付 • 下发 • 测试 • 监控

19. 移动端持续交付 • 下发 • 测试 • 监控

20. 移动端持续交付 • 下发 • 测试 • 监控

21. 移动端持续交付 • 下发 测试结果 • 测试 测试设备 • 监控 发布审核

22. 移动端持续交付 • 下发 • 测试 • 监控

23. 服务开发 • 总结 • 要做的 • ⽅方向 H5优化 RN加速 移动持续交付

24. 服务开发 • 总结 移动端 交付平台 1. RN升级,完善CLI 1. ⽣生产测试⽤用例例 • 要做的 2. 三端同构 2. 打包提速 • ⽅方向 3. 统跳服务 3. 优化联调环境 4. Flutter实践 4. 代码质量量可视化

25. 服务开发 • 总结 • 要做的 效率 + 质量量 = 有效价值 • ⽅方向

26.谢谢