react naitve
文章平均质量分 88
smallnewQaQ
这个作者很懒,什么都没留下…
展开
-
React native拆包的正确姿势——基于metro bundle
1、分包 观察现在一些接入React native的大厂,如菜鸟、大搜车、去哪儿,都将react native 的jsbundle分为几个包来使用。作用是啥?为什么要这么折腾?像去哪儿、腾讯或者携程都发布了一些文章来阐述分包的原因了,不了解的可以去搜索看看。我这边只总结下:react native原生打出来的包都只有一个jsbundle(除了rambundle),里面包含了所有你写代码和re...原创 2018-10-16 15:16:03 · 9436 阅读 · 12 评论 -
携程CRN源码详解之拆包(三)——增量编译
1、增量编译 增量编译在这里指的是:打过一次js包后,后面再打包就会基于上次的打包基础打包。这里的基础指的是moduleId的map。crn-cli使用的是数字来代表module,rn_common包生成的文件都是0.js 1.js 2.js 3.js.... 业务包生成的文件都是666666.js 666667.js ..... ,而这些数字在rn中并不是固定的,比如在一次打包中rn_...原创 2019-04-19 02:22:52 · 994 阅读 · 0 评论 -
携程CRN源码详解之拆包(二)——rn_common打包
1、rn_common rn_common是crn所定义的框架包,rn_common包含了RN原来的框架和crn自己的基础框架。作为基础框架,rn_common会被上百个携程业务包共同使用,只有把框架代码抽取出来才能实现框架代码后台预加载功能,这样加载业务页面的时候只需要加载业务代码,大大减少加载时间。2、打包参数传递 上一节我们已经知道:打common包的时候会传递--b...原创 2019-04-19 02:22:45 · 974 阅读 · 0 评论 -
携程CRN源码详解之拆包(一)——总览
1、CRN开源 CRN是由携程无线平台研发团队基于React Native框架优化,定制成稳定性和性能更佳、也更适合业务场景的的跨平台开发框架。CRN是一整套框架,包含了拆包、加载流程框架、UI框架、平台统一框架,CRN的初衷是提升RN页面加载速度,在不断地优化后形成了CRN框架。因此性能是CRN的核心,而需要做到性能优化,就离不开CRN的根本——拆包。 本次CRN开源的主要是...原创 2019-04-19 02:22:31 · 2112 阅读 · 0 评论 -
React Native调试源码分析——Debuger
1、前言 我们都知道我们在调试的时候都会开一个chrome,在chrome的调试界面中打断点、看log,本节就主要了解以下Debuger模式下js代码是如何加载的、js代码如何更新、如何断点源码。2、App开启Debug模式 跟着Debug JS Remotely按钮走,直接上reloadJSInProxyMode函数//DevSupportManagerImpl.j...原创 2019-04-16 22:13:52 · 959 阅读 · 0 评论 -
React Native调试源码分析——HMR
1、前言 上次的远程加载简单描述了app reload(开发时运行也是一个逻辑)和MetroServer交互的流程,现在开始讲讲HMR,对应到RN调试界面中的Enable HotLoading,HMR全名为Hot Module Replacement。它能让你在修改代码后马上在app上展现结果而且不会丢失状态。2、HMR通讯方式 先看其创建的位置,也是在runServer中...原创 2019-04-16 15:00:17 · 579 阅读 · 0 评论 -
React Native调试源码分析——远程代码加载
1、前言 最近一直思考着如何让react native开发时分步加载js代码,而RN本身就有支持类似的功能,比如hot reload,而hot reload是根据文件的变化而进行差量加载代码的,如果需要实现分步加载的功能,就需要魔改react native相关的加载源码,因此经过几天的研究,总体了解了React Naitve调试过程中的流程,现分享给需要魔改或者了解相关源码的同学们。...原创 2019-04-15 22:18:34 · 1226 阅读 · 0 评论 -
React native 可视化拆包
1、来源 前提是使用metro配置来拆包,可以在之前的博客先了解下:https://blog.csdn.net/tyro_smallnew/article/details/83088216如果是简单的基础包中包含各种第三方组件、业务包只包含自己写的业务代码情况下的拆包,很简单地使用命令行就可完成拆包。但有些时候业务包也会包含了第三方组件,比如只有一个业务包中使用了第三方日历组件而其他...原创 2019-03-04 23:51:35 · 1060 阅读 · 0 评论 -
如何减少Code Push的更新包大小
1、code push的更新包逻辑 发布codepush更新的时候使用的命令行一般是这样的:code-push release YourApp ./your_jsbundle_and_imgs/ 3.0.0 --des "TEST code Push"这个命令行上传了个3.0.0版本的目录上去,而这个目录会包含你的jsbundle和许多图片,假设当前3.0.0版本的文件如下:...原创 2018-11-25 14:07:24 · 914 阅读 · 1 评论 -
React native拆包之 原生加载多bundle(iOS&Android)
在这之前已经描述了0.57版本的react native如何拆包:https://blog.csdn.net/tyro_smallnew/article/details/83088216(React native拆包的正确姿势),对于原生如何加载多个js包的方法只是简单的描述下,现在开始补坑。0、rn之jsbundle 当然我们都知道jsbundle是什么(就是我们打包出来的js包,...原创 2018-11-02 22:14:14 · 9306 阅读 · 9 评论 -
携程CRN源码详解之拆包(四)——业务打包
1、业务包 除了rn_common的包含业务逻辑的代码会被CRN打成业务包。CRN希望把业务包做得尽量地可以按需加载,因此CRN使用了metro本来就有的rambundle功能。rambundle在之前叫做unbundle,这种打包方式能把bundle按模块分散成多个独立的js文件,加载页面的时候只会加载需要的js文件,大大提升了页面的加载速度。2、打包命令 cmd = 'no...原创 2019-04-20 15:43:58 · 867 阅读 · 1 评论