ctripcorp / crn Goto Github PK

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

License: MIT License

JavaScript 34.31% HTML 0.24% Java 25.40% C++ 19.90% Makefile 0.10% C 0.22% Objective-C++ 3.90% Objective-C 13.58% Ruby 0.03% CSS 0.01% Assembly 0.12% Shell 0.38% Batchfile 0.01% Starlark 1.82%

crn's Introduction

CRN

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

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

一、功能列表

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

二、如何运行

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

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

三、 CRN性能数据

以Demo工程为例，运行RN官方tester项目。分别在iPhone 7Plus、iPhone 6、Samsung S6 Edge+手机上测试页面的首屏加载时间，对比图如下。

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

四、对官方RN的修改

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

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

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

iOS - 在iOS目录搜索CRN_OPT宏
Android - 在Android目录搜索注释'CRN BEGIN'和'CRN END'
CLI - 在packages/crn-cli目录搜索'CRN BEGIN'和'CRN END'

五、 CRN-CLI的使用

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

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

六、如何接入

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

1. 全新工程接入

crn-cli init <project-name> 初始化工程，里面包含iOS、Android、JS代码
crn-cli run-ios , crn-cli run-android 运行RN工程，进行开发调试
crn-cli pack 打包，并将打包产物拷贝到Native工程的webapp目录

2. 现有工程接入

JS代码部分

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

//index.js
AppRegistry.registerComponent(appName, () => App);
module.exports = App; //添加此行代码，导出入口模块即可

Native Runtime接入
- iOS参考
- Android参考

七、其它

具体优化方案和思路可以参考先前的分享文章干货 | 近万字长文详述携程大规模应用RN的工程化实践
欢迎各位同行提issue和PR

License

CRN is MIT licensed, as found in the LICENSE file.

crn's People

Contributors

Stargazers

Watchers

Forkers

blackwuxin crazycrystal chufengma cjddny super-crab sakurallj uwunmn xqin perhaps-yo zhiyongpan xiao-shuai kongdongdong all-learn-nodejs dave-wind boseny ljunb zhangguozhong johony myprelude silencedcoder krmao jianjiade langlangpom wongyuzhou torns zhuzeus sfdux onreadystatechange snapshot-repo comlog elitecrm02 xiaomingtuo xiongxiong109 superjunjun uiblog wheelo showtan001 gofugui renhanyi zinete ilfocus hhxx1314 gaoxianglyx hhy5277 easy261925 jhongwei80 whczs sven36 wangzihao5325 sheep-king lichengtao1989 hdulqs w7yuu yjb2020 fuzzyfade amtech qc-l whowrongswhere alvin917 zhugang caolongs nan0pr0be1 xidipeng wu928320442 syxxjgh xl19880619 mailme365 orangeflavoredcoldcoffee helloworldnosegfault yanzengyong anonymous-monk tracyxia716 rfsc jishuke steedos timxim jqpan hanrovey guoba371 liuchengbin8 wangliguang lzbmac wu736139669 wangshaojie11 liumengdi newlysoft xie244135119 zify sdgdsffdsfff hpyfei pengchengzh sunfengbiao zouyaozhen1234 eastwood1986 z937010871 chengchao12138 haiifeng oscarhuang itxuye awaylyr

crn's Issues

热更新支持

CRN自定义的打包方案，理论上应该上不支持code-push热更新的吧，如果要支持热更新，后续CRN会考虑支持吗

CRN has provide solutions for folding screen？

We urgently need a solution for folding screen, because folding screen will be popularized.

到现在还没运行成功你们的demo,点击加载按钮报错，本机浏览器访问返回。有没有交流群啊

在线模式是怎么使用的

1.在线模式的bundle文件也是做了分包处理吗，如果是在服务器上的bundle文件是压缩包吗

关于一点加载细节的请教

我是 Android 开发人员。

有几个问题想要请教一下。

我能否把整个 crn-cli pack 后的目录当作静态资源用 Git 管理起来，然后页面文件有改动之后 push 覆盖，这样我的客户端始终能请求到最新的页面文件（通过一些适当的缓存策略）。
能够接手客户端这边的 Okhttp 逻辑实现 “静态页面” 的缓存实现吗？例如通过 Code：304 、静态页面地址全路径#xxx 这样的方式，而尽量不依靠打包进 assets 文件夹来实现业务页面的实时更新。

谢谢！

请教cachedBridgeList的设计，会存在多个bridge的场景吗？

您好，如题：
注意到 CRNBridgeManager 中的 cachedBridgeList 为数组设计，印象中 RN 中的 bridge 实例不是只会有一个吗？为何使用一个 cacheBridgeList来管理,在分包场景下，每次加载业务bundle时还更新common bridge相关信息并不断调用 prepareBridgeIfNeed接口。
比较困惑这块的逻辑，望解答，谢谢您

希望能介绍下针对大内存性能优化，界面卡顿UI渲染优化做了什么处理？

希望能介绍下针对大内存性能优化，界面卡顿UI渲染优化做了什么处理？因为项目也已经开发有一段时间，整体迁移至crn成本有点高

about "666666"

这个“666666”使用的时候需要什么特殊注意么？我看代码的意思是“业务模块ID应>=666666”。

点击“添加并加载在线地址”报错

多业务打包问题

目前提供的打包配置入口如下：
"packConfig": {
"entryFile": "index.js", //打包入口文件
"bundleOutput": "publish", //打包产物输出目录
"packageName": "CRNDemo", //包名
"dev": false //打包环境
}
如果有多个子业务在同一个工程下开发，怎么配置多业务打包的入口呢。
还有，请问这套框架怎么解决原生和RN路由跳转的一些问题。

文档能补上吗

为什么我新建项目后。项目的名称都是CRNDemo？

我在使用crn-cli init AA后，为什么在生成后的项目名称却是CRNDemo？

能否增加typescript支持?

使用crn-cli init <project-name>创建项目后在华为P8手机上安装后立马闪退

您好：
使用crn-cli init 创建项目后在华为P8手机上安装后立马闪退，操作步骤如下：
环境：windows10 企业版，node.js 版本10.15.2
1、npm install -g crn-cli
2、crn-cli init CRNDemo
3、yarn install
4、crn-cli run-android
安装到Android6版本上运行闪退，安装到Android9上能成功运行

在华为荣耀10，os9.0上摇晃手机点击dev setting就崩溃

按照你们官方文档初始化app后添加依赖，会出现打包出错

Error: Unable to resolve module `./index` from `/Users/admin/Desktop/code/CRNAPPDEMO2/.__tmp/.`: The module `./index` could not be found from `/Users/admin/Desktop/code/CRNAPPDEMO2/.__tmp/.`. Indeed, none of these files exist:
  * `/Users/admin/Desktop/code/CRNAPPDEMO2/.__tmp/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `/Users/admin/Desktop/code/CRNAPPDEMO2/.__tmp/index/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
    at ModuleResolver.resolveDependency (/Users/admin/Desktop/code/CRNAPPDEMO2/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Users/admin/Desktop/code/CRNAPPDEMO2/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/admin/Desktop/code/CRNAPPDEMO2/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at /Users/admin/Desktop/code/CRNAPPDEMO2/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:261:42
    at Server.<anonymous> (/Users/admin/Desktop/code/CRNAPPDEMO2/node_modules/react-native/node_modules/metro/src/Server.js:1038:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/admin/Desktop/code/CRNAPPDEMO2/node_modules/react-native/node_modules/metro/src/Server.js:99:24)
    at _next (/Users/admin/Desktop/code/CRNAPPDEMO2/node_modules/react-native/node_modules/metro/src/Server.js:119:9)
    at <anonymous>

1、如果打开预加载，则app会崩溃（可能是因为打包失败，没有读取到jsbundle）
2、在根目录下App.js中，import一个依赖就会报上面的错误，可能是服务在拆包的过程中出错了
3、现在只在android模拟器下测试，发现这个问题，iOS还没看

cli 模板有问题，server bundle 路径有问题

cli 的模板 package.json 里边的 script 应该是 crn-cli xxx 吧？
另外启动 bundle server，路径在 ./project_name/__tmp 目录下，应该在 ./project_name ？

.jsx file is not resolvable [无法识别jsx文件]

Is this a bug?
Yes, as I can see the error logs, it lists everything except .jsx, .native.jsx, .ios.jsx, .etc

Indeed, none of these files exist:
  * `***/src/app(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`

Reproduce
Change any jsx-syntax file‘s extension to .jsx to test
Suggestion
use metro.config.js to apply supported extensions

这是bug吗？
是，错误日志如下，除了jsx全都支持，即使是tsx

Indeed, none of these files exist:
  * `***/src/app(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`

如何重现
把任意含jsx的组件后缀改为jsx
建议
使用metro.config.js的配置增加支持

crn-cli start 启动报错

react-native hook lazy

用lazy 能替代里面首次加载优化策略吗

react native android第三方包引入问题

react-native link 第三方包 android引入报错
crn对于android的MainActivity重新实现了，这样子导致引入第三方包失败，这样的问题如何解决呢

react-native-gesture-handler 引入报错

Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED

可以把iOS源码发布到Pod里去吗？

感谢开源。就是现在手工导入配置麻烦，你们有计划将源码发布到cocoapods吗？

怎么分模块打包

您好，怎么根据不同模块分别打包不同的crn bundle

react-navigation在crn的脚手架下使用，tab navigator无法显示出来，但是在expo脚手架下是可以的

react-navigation的导航tab在crn框架下无法显示，不知道有没有人碰到这个问题，同样的代码在expo下是可以正常运行的

请问会开源CRN的View组件和API组件吗？

如题！
感谢CRN的开源！！！

如何在js打包多业务

非常感谢携程的开源。
看了一下crn-cli的代码，目前pack命令只支持生成common+一个业务。如果想要生成一个common+多个业务，应该如何配置js文件和打包呢？

会支持rn和原生分离么

想要实现像h5那样的模式（无需发包）：
前端人员只需要把rn页面打包成bundle（带hash），上传到服务器。
原生人员则只需要下载bundle比较hash来进行热更新（无需发包）。

这种的目前可以实现么？？？

后续还会有其他方面的开源项目吗？？

前排点个赞

启动服务的问题

你好，我在 Ubuntu 上 init 项目过后，可以直接使用以下命令直接启动服务没？

crn-cli start

我执行过后，提示

[crn-cli]: 正在判断当前输入参数是否合法以及当前目录路径是否合法...
[crn-cli]: 当前输入参数合法!
[crn-cli]: 当前目录路径为: /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo
[crn-cli]: 当前启动的RN服务端口为: 8081
[crn-cli]: 正在判断当前RN服务是否已经启动...
[crn-cli]: 当前RN服务正在启动...
[crn-cli]: 当前写入启动服务脚本...
[crn-cli]: 写入启动服务脚本完成!
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/metro/src/shared/output/RamBundle/crn-as-assets.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/metro/src/shared/output/crn-bundle.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/metro/src/lib/createModuleIdFactory.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/metro/src/shared/output/RamBundle/as-assets.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/metro/src/shared/output/bundle.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/metro/src/ModuleGraph/worker/collectDependencies.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/metro-config/src/defaults/index.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/metro/src/shared/output/RamBundle.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/metro/src/lib/polyfills/require.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/react-native/Libraries/polyfills/lazyRequire.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/react-native/Libraries/Image/AssetSourceResolver.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/react-native/Libraries/Image/resolveAssetSource.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/@react-native-community/cli/build/commands/bundle/bundle.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/@react-native-community/cli/build/commands/bundle/buildBundle.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/@react-native-community/cli/build/commands/bundle/bundleCommandLineArgs.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/node_modules/react-native/rn-get-polyfills.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/rn-cli.config.js >文件
成功替换< /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/crn_common_entry.js >文件
[crn-cli]: 正在启动RN服务...
[crn-cli]: 执行以下脚本: /home/lychee/.local/share/Trash/files/CRNDemo/CRNDemo/.__tmp/launchPackager.command
[crn-cli]: 启动RN服务成功!

但是我查看了下，8081 上并没有程序在跑，我也无法访问。

打包成线上包，怎么去掉CRNDemo这层

您好，这个app开发好，怎么直接加在crn bundle，而去掉CRN Demo这层？

base.mapping如何编写

请问base.mapping是一点点写的吗？还是自动生成的？将近400个id...

该框架对RN的列表组件有优化么，FlatList/ListView?

crn-cli run-android 闪退问题

crn-cli run-android 应用安装成功之后应用启动之后直接闪退请问这个要怎么解决

CRNDemo 已停止

机型三星 Note4, 系统6.0.1

感觉这里多删了代码，有点问题，上面少了一个else？

CRN/iOS/CRNDemo/CRNDemo/CRN/CRN/Model/CRNURL.m

Line 82 in 496c064

else {

1.在settings.graldle添加

include ':ReactAndroid',':crnbase'
project(':ReactAndroid').projectDir = new File(rootProject.projectDir, './rnSource/ReactAndroid')

在gradle里引入是 implementation project(':crnbase')不是 implementation project(':base')

2.如果需要通过ReactAndroid来进行编译的话，需要在根目录下的gradle.properties里配置useReactAndroidSource=true，同时配置NDK环境。（但是编译会比较耗时）
3.如果不想要通过ReactAndroid源码来进行编译，就把CRN工程的repo目录拷贝进来，useReactAndroidSource设置为false。同时Android Native项目根目录下gradle allprojects里的repositories里添加

maven {url = "$rootDir/repo" }。

crn-cli: command not found

执行了 npm install -g crn-cli ，但是报错

ctripcorp / crn Goto Github PK

crn's Introduction

CRN

一、 功能列表

二、 如何运行