携程大规模应用React Native的工程化实践.pdf

1、携程大规模应用React Native的工程化实践Topic面临的挑战和方案的选择ReactNative在携程的使用现状CRN框架的优化我们的经验与实践总结与未来展望为什么会使用RN开发成本动态更新社区资源相对较低支持动态更新相对成熟，社区活跃包大小性能体验占用AppSize小用户体验佳现状 业务广泛接入 携程旅行App，线上70+RN业务模块 大量首页入口使用RN开发 PV占比超过H5 Hybrid 集团内多App已接入使用?现状 业务深度使用 核心业务、全流程使用Native转RNHybrid转RN 复杂业务高(火车票)710个JavaScript模块100个Page代码7z压缩后600K

2、BCRN框架介绍运行页面性能监控稳定性优化Lazy RequireBundle拆分文档组件开发代码仓库动态打包配置发布系统及监控运维CLI工具线上错误监控框架预加载CRN是基于RN定制，以实现开发友好、运行稳定高效、运维可监控的大前端开发框架。开发 CLI和文档支持 CLI和文档开发 组件扩展支持 70+API和UI组件支持 重写fetch、listview等组件 扩展ScrollView组件 跨容器(Native、Hybrid、RN)通讯支持 组件开发原则，RN优先，Native兜底开发 Event机制 Event机制解决多端通讯问题Event.addEventListener(name,c

3、allback)Event.removeEventListener(name)Event.sendEvent(name,data)基于Notification实现开发 统一Storage 统一Storage提供Storage.load(params,callback)Storage.remove(params)Storage.save(params)设计说明存取支持domain区分不同业务存取expireDate支持存取内置加解密支持开发 CRN Page模型 CRN Page 模型CRN 容器:包含ReactRootView业务Page继承自CRN Page基类CRN容器：CRNViewCo

4、ntroller/CRNActivityCRNPageACRNPageBCRNPageCCRN App开发 Page生命周期扩展 CRN Page生命周期扩展所有CRN页面继承同一Page基类解决和Native/Hybrid/其它RN业务模块页面切换无回调问题解决App前后台切换无回调问题同一CRN容器内不同Page间切换pageWillAppearpageDidAppearpageWillDisappearpageDidDisappearCRN新增cmpDidMountcmpWillUpdatecmpDidUpdatecmpWillUnmount常规组件生命周期cmpWillMount运行

5、Bundle拆分和Require优化为什么要拆分简单HelloWorld项目release打包520KB，压缩后147KB大量业务模块上线，size占用是问题为何要改造Require后台预加载提升首屏渲染时间支持动态按需加载运行 Bundle打包文件结构1.Global Define/Require.2.Module define.3.Require()Bundle结构抽象 官方命令打包出的Bundle运行 Bundle代码执行顺序1.Global Define/Require.2.Module define.3.Require()1.Global Define/Require.3.Requi

6、re().2.Module define代码执行顺序 官方命令打包出的Bundle运行 Android Unbundle打包 RN Android Unbundle打包所有模块都打包成独立文件运行 CRN Bundle拆分 CRN打包方案，合并common官方命令打包出的bundle运行 Bundle拆分之后的加载CRN Bundle拆分之后执行过程框架JavaScriptA目录ReactInstanceManager/Bridge(JavaScript Core)RequireLoad业务代码资源B目录运行 Bundle拆分之后的加载CRN Native Require实现官方Android