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

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 .谢谢