CRN 携程的跨平台开发框架开源项目

我要开发同款
匿名用户2019年07月25日
116阅读
开发技术JavaScript
所属分类React开源项目、手机/移动开发、React 开源项目
授权协议MIT

作品详情

CRN是CtripReactNative简称,由携程无线平台研发团队基于ReactNative框架优化,定制成稳定性和性能更佳、也更适合业务场景的的跨平台开发框架。

本次开源基于ReactNative0.59.0,react16.8.3版本,开源的主要是性能优化部分,也是规模化使用RN进行业务开发必须要做的优化。

一、功能列表打包支持框架和业务代码拆分支持框架代码后台预加载打包支持增量编译(同一模块,两次打包模块ID不变)iOS&Android统一一套打包产物首屏加载性能统计LazyRequire二、如何运行

开源代码中的iOS/AndroidDemo工程可以运行起来,参考以下操作步骤。

RN运行环境搭建,参考官方文档进入iOS目录,使用xcode打开./iOS/CRNDemo/CRNDemo.xcodeproj工程,运行进入Android目录,使用AndroidStudio导入./Android工程,Run

三、CRN性能数据

以Demo工程为例,运行RN官方tester项目。分别在iPhone7Plus、iPhone6、SamsungS6Edge+手机上测试页面的首屏加载时间,对比图如下。

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

四、对官方RN的修改

CRN是基于ReactNative定制的,我们对其Runtime、CLI工具代码,都有调整。主要改动点包括:

支持拆分之后的包运行,针对CRN打包格式的nativeRequire实现增强稳定性,主要是Android平台,大量的异常处理和保护跨平台共享一份代码、资源,CRN-CLI内部实现

有兴趣的同学可以研究我们的改造点,具体改造点我们都有相应的注释:

iOS-在iOS目录搜索CRN_OPT宏Android-在Android目录搜索注释'CRNBEGIN'和'CRNEND'CLI-在packages/crn-cli目录搜索'CRNBEGIN'和'CRNEND'五、CRN-CLI的使用

以上是开源代码的的工程结构及DEMO运行效果,实际开发过程中,不需要关注这些细节,我们可以直接使用CRN-CLI脚手架进行开发调试和打包。

为了方便使用,我们将该开源的CRN-CLI工具发布到了npmjs.com,安装之后可以直接使用,具体使用参考详情。

六、如何接入

为了方便接入,需首先安装crn-cli,执行 npminstall-gcrn-cli 即可

1.全新工程接入crn-cliinit<project-name> 初始化工程,里面包含iOS、Android、JS代码crn-clirun-ios , crn-clirun-android 运行RN工程,进行开发调试crn-clipack 打包,并将打包产物拷贝到Native工程的webapp目录2.现有工程接入

JS代码部分

只需在现有JS入口模块文件如index.js中添加一行模块导出代码即可,示例如下:

//index.jsAppRegistry.registerComponent(appName,()=>App);module.exports=App;//添加此行代码,导出入口模块即可
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论