终于来了！携程开源 RN 开发框架 - CRN

经过近两个月的准备，携程无线平台研发团队正式将内部的 React Native 开发框架 - CRN 实现开源。CRN 对原生的 React Native 框架进行了大量架构简化、性能和稳定性调优的工作，能大幅降低 RN 技术的应用成本。

背景

携程从 2016 年年中正式引入 React Native，至今已将近 3 年，现在逐步稳定，并成为内部首选的跨平台开发方案。

先简单回顾下 ReactNative 在携程的发展轨迹

• 2016 年，RN 0.30.0 版本，试验期

• 少数对性能和动态性都有要求的业务模块使用，其它大多选择流量小的业务流程做尝试；

• 完成了打包 Bundle 拆分、框架预加载等核心性能瓶颈的优化;

• 配套文档、发布系统建设；

• 2017 年，RN 0.41.0 版本，大面积使用期

• 携程旅行 App 各业务线都有接入使用，大量原先使用传统 Hybrid 技术开发的业务，切换到 CRN；

• 为解决复杂业务的首屏渲染性能问题开发 LazyRequire 方案；

• 配套的发布监控、异常监控、性能报表系统建设；

• 2018 年，RN 0.51.0 版本，爆发期

• 业务大规模接入，大多是主流程、全流程使用，现在大家使用的携程旅行 App 中有超过一半的页面都是 RN 开发的；

• 集团内其他核心 App (智行、Trip.com、携程商旅等) 全部接入使用；

• Android 平台的稳定性大幅提升；

• 2019 年，RN 0.59.0 版本，稳定期

• 刚升级完成，本次开源也是基于该版本；

为什么开源

• 分享我们对 RN 框架的性能优化方案

• 期待业内使用 RN 技术的同行通过开源社区与我们进行更深入的交流

开源内容

CRN 作为一个整体解决方案，涵盖了从开发框架、工具、文档、测试、发布到运维全研发生命周期的支持，与大量内部系统打通，并定制了适合携程研发组织结构的开发流程。

本次开源基于 ReactNative 0.59.0, react 16.8.3 版本, 开源的主要是性能优化部分, 也是规模化使用 RN 进行业务开发必须要做的优化。

• CLI

• 工程创建、调试和运行

• 打包时拆分框架和业务代码

• 打包时生成一套打包产物 (可同时运行在 iOS 和 Android 平台)

• 打包时支持增量编译 (同一 JS 模块多次编译模块 ID 不变，便于差分更新)

• LazyRequire, 按需加载

• Runtime

• 打包出的框架代码后台预加载

• 业务代码缓存策略 (提升业务首屏二次打开速度)

• 稳定性增强

• 首屏渲染性能统计

适用场景

• 纯 RN App

• 因为启动就是 RN 业务，首页无法享受框架预加载带来的加载提速

• 如果有多个业务包，CLI 的拆包可以减小包大小

• 使用 CRN 开源的 Runtime(iOS/Android native 代码)可以增强 RN 的稳定性

• 混合型 App

• CRN 的优化是针对该场景，所有功能点都适合

改造优化

举例介绍其中两个重要的优化场景：

首屏加载性能

• 运行 Demo 工程中的 Tester 模块 (为 RN 官方提供的测试模块)

• 在 iPhone 7Plus、iPhone 6、Samsung S6 Edge+ 三款机型上测试

• 分别采用 CRN 和标准 RN 两种模式加载

统计页面的首屏加载时间，对比图如下:

可见 CRN 优化后的页面首屏加载时间与优化前 RN 官方的方式相比在 iOS 上减少了 50%左右，Android 上减少了 60%左右，优化效果明显。

框架和业务代码拆分

以 RNDemo 工程为例(仅包含一个类似于 HelloWorld 的页面)

• 官方命令打包出的 main.js 624KB

• CRN 打包业务代码 js-modules 目录 2KB，common_ios.js 615KB

• 如果大量业务模块使用 RN 开发，CRN 打包方案，只有一份框架代码 common_ios.js, 可以大幅减小安装包体积。

CRN 工程介绍

CRN 的开源项目地址：https://github.com/ctripcorp/crn

有分析过react-native仓库源码的同学应该会对项目工程结构感到很困惑，因为整个项目很庞大，涉及到 Native Runtime、Component、Tool、Tester 代码，还有不少的第三方依赖和组件管理工具的配置，结构也不是太清晰，所以官方现在进行了Lean Core的项目，目的就是对工程结构进行梳理，将非核心功能都移动到独立仓库。

React Native 涉及的技术栈比较广，包括 iOS/Android native 开发、React 组件开发、nodejs 开发、还有大量的 C++库，能同时能掌握这么多技术栈的工程师不多，CRN 对 RN 的 runtime，打包脚本都做了调整，为了能尽可能降低理解和接入成本，我们对 CRN 的开源工程做了大量简化，提供开源代码的同时，也将对应的 CLI 发布到了 npm 上，方便大家使用。

开源代码主要包括两部分

• Runtime

• 分为 iOS 和 Android 两个目录，内部包含 CRN 修改的 RN 代码

• 默认带了 CRNDemo 工程，IDE 中可以直接运行

• CLI

• 和 ReactNative 的开源工程类似，开源的代码直接使用起来比较繁琐，所以提供了类似于 react-native 的 CLI 以简化使用

• CLI 的使用参考 GitHub 中文档
  

如何上手

为了方便接入，首先安装 crn-cli， 执行 npm install -g crn-cli 即可

现有 App 如何接入？

• Native Runtime 接入

• 将 iOS/Android 目录下的 Runtime 代码替换 RN 官方代码，具体参考项目 README 文档

• 启动逻辑中添加 webapp 目录代码物拷贝到工作目录，可参考 CRNDemo 工程源码

• 启动时调用框架预加载代码

• JS 代码接入

• 在现有 JS 入口文件如index.js中添加一行模块导出代码，示例如下：

• 使用crn-cli pack命令打包，并将打包产物拷贝到 Native 工程的 webapp 目录

全新 App 如何接入？

• crn-cli init <project-name> 初始化工程，里面包含 iOS、Android、JS 代码

• crn-cli run-ios , crn-cli run-android 运行 RN 工程，进行开发调试

• crn-cli pack 打包，并将打包产物拷贝到 Native 工程的 webapp 目录

总结

CRN 是经过携程大规模生产验证的 RN 开发框架，我们通过对原生 RN 框架的改造，实现了更低的 RN 技术应用成本，同时解决了众多面对线上场景的工程技术问题。

未来我们将尽量保持开源版本与内部版本的一致，并开源更多工程和效率相关的模块与组件，期待同行在 GitHub 上向我们提出关于 RN 技术的想法和反馈意见。

作者介绍：

赵辛贵，携程无线平台研发部开发总监。2013 年加入携程，主要负责 App 基础框架研发相关工作，曾参与 Native、Hybrid 和 React Native 框架设计、工程模块化、Android 插件化等项目。目前重点关注 React Native 技术在公司的推广和研发支持、无线框架和工程架构升级。

本文转载自公众号携程技术（ID：ctriptech）。

原文链接：

https://mp.weixin.qq.com/s/yPgyqrggtYbrg4htEaw_wg