RN JSBundle 拆分解决方案（1）: 应用启动、视图加载原理解析

最新推荐文章于 2022-01-25 10:08:54 发布
置顶 最新推荐文章于 2022-01-25 10:08:54 发布
阅读量3.7k 收藏 6
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013718120/article/details/79347331
版权
本文分析RN应用启动、视图加载原理，从JS和Native端启动流程入手，探讨为何拆分JSBundle。RN启动涉及ReactActivity、ReactActivityDelegate、ReactNativeHost等，通过源码跟踪理解加载过程，拆包有利于优化内存、加载速度和热更新。
摘要由CSDN通过智能技术生成

前两篇文章和大家分享了RN中的触摸事件机制。链接如下：

React Native 手势触摸事件机制详解（基础篇）

React Native 手势触摸事件机制详解（进阶篇）

接下来的系列内容将结合 Android 原生层来分析拆包解决方案。如果你具有Android原生开发经验，并且在实践 Android + RN 的混合模式开发，那么这次连载的文章内容你一定喜欢。拆包解决方案的系列内容目录大致如下（点击进入相应内容）：

（1）RN 应用启动、视图加载原理解析（源码层）

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Songlcy
关注
专栏目录
订阅专栏
RN JSBundle 拆分解决方案（3）: 固定ModuleId，JSBundle按需加载
...
11-30 3485
实践源码：react-native-split-bundle：https://github.com/songxiaoliang/react-native-split-bundle 前面两篇文章分别从源码加载、Bundle文件结构、Metro打包工具等做了简单分析，逐步了解关于RN打包，Bundle 文件加载的相关内容。本篇内容将结合代码来完成最终的实现方案。在阅读该篇博客内容前，可以点击如...
RN拆包解析
郝捷的专栏
01-14 1010
一. 拆包动机 RN作为非常优秀的移动端跨平台开发框架，在近几年得到众多开发者的认可。国内各大厂采用在当前原生应用内集成RN的方式，使得App应用的灵活性得到了很大的提升。在原生应用内嵌入RN，就是需要在原生应用内加载RN模块（1个或多个JSBundle），并得以显示。JSBundle中包含了当前RN模块的js代码。如果存在多个RN模块需要被加载时，就需要分别打出多个JSBundle，并且多个JS...
RN debug工具
01-10
该工具是React Native的debug工具，仅作为学习分享用途。
RN：分包/拆包技术调研
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
01-25 1839
参考文档 https://weidian-inc.github.io/hera/#/ https://blog.csdn.net/xiangzhihong8/article/details/84998455 https://blog.csdn.net/xiangzhihong8/article/details/85054279 https://zhuanlan.zhihu.com/p/84862926 https://github.com/smallnew/react-native-multibundler
RN拆包实践的一些经验教训
爬不上树的小松鼠
01-07 402
RN拆包的一些经验教训
RN JSBundle 拆分解决方案（2）: JSBundle 、Metro 结构分析
...
11-27 4778
  在第一篇（RN JSBundle 拆分解决方案（1）: 应用启动、视图加载原理解析）中我们对RN的启动、视图加载流程从源码角度做了简单的梳理。本篇内容我们继续对JSBundle 文件内容结构，以及当前RN框架默认的打包工具 Metro 进行分析。 JSBundle 文件结构 当我们执行 react-native bundle | unbundle 命令时，RN框架会按照当前给定的参数，打...
⚡️ React Native 启动速度优化——JS 篇【全网最全，值得收藏】
卤蛋实验室
04-16 527
如果你喜欢我的文章，希望点赞???? 收藏 ???? 评论 ???? 三连支持一下，谢谢你，这对我真的很重要！ 前言 上一篇文章主要从 Native 的角度分析了 React Native 的初始化流程，并从源码出发，总结了几个 React Native 容器初始化的优化点。本文主要从 JavaScript 入手，总结了一些 JS 侧的优化要点。 1.JSEngine Hermes Hermes 是 FaceBook 2019 年中旬开源的一款 JS 引擎，从 release 记录可以看出，这个是专为
React Native BackHandler exitApp 源码分析
...
11-22 1915
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 概述 昨天技术交流群里有个朋友提出一个问题，在 Android 中嵌入了 React Naitve，并且想从RN层执行代码，回到上一个原生Activity。说起来比较模糊，假设他的界面执行流程如下： ActivityA→ActivityB →RNActivityA→ JS端执行代码→...
ReactNative - mian.jsbundle生成
江苏小白龙
04-09 1059
我项目是ios原生集成了rn然后什么都完成了卡在了生成离线包这一个关上面,按照官方文档没能成功在网上也都是千篇一律的 curl http://localhost:8081/index.ios.bundle -o main.jsbundle生成main.jsbundle 方法而且都不怎么完整遇到问题也没回复我比如: 比如你需要先将项目运行起来打开服务器也就是cd到你的项目根目录执行 npm s...
react-native-multibundler：react native可视化bundle拆包，支持远程加载和调试，支持官方的0.57〜0.63.2版本，使用官方的metro拆包，适用于Android，iOS
02-04
React本机多捆 基于react native的地铁捆绑器的配置化开发来处理分包，支持iOS和Android，支持远程加载，地铁捆绑器为官方打包的工具，使用官方分包方法更灵活稳定，比网上的一些方法更实用可靠。 支持debug，任选模块路径或增量id作为模块id Metro官方： : 支持react native 0.57〜0.63.2，通过采用的是官方metro拆包，理论上日后的rn版本无需修改即可兼容 iOS和Android都有加载多bundle实例，经测试稳定可靠 demo使用说明： 1、进入项目文件夹：npm install 2、android：使用android studi
css js bundle
潘晓宇(panxiaoyu)的专栏
10-20 911
------------- Layout.cshtml -------------              Title          @this.Html.Partial("BundleStylesFile")     @this.RenderSection("Styles", required: false) html code    
Bundle 究竟是什么？
小黄鱼被喵吃了的专栏
03-24 2137
bundle用于场景： 在我印象中比较深刻的是，一般用于activity之间传递数值，也用于handler发送消息，如下： Intent intent = new Intent(); Bundle bundle = new Bundle(); bundle.putString("KEY", "VALUE"); intent.putExtra("b
在Android中预加载React Native jsBundle
weixin_33738578的博客
07-12 510
前段时间在项目中遇到了一个问题：从原生模块跳转到RN模块时会有一段短暂的白屏时间，特别是在低端手机更加明显。在网上搜了一圈，发现这个问题非常常见。 ReactRootView mReactRootView = createRootView(); mReactRootView.startReactApplication(mReactInst...
RN通信底层原理 -- 总结篇
m0_49508485的博客
01-22 4294
Facebook 曾在 2018 年 6 月宣布了大规模重构 RN 的计划和路线图，整个的重构目的是为了让 RN 更轻量化、更适应混合开发，接近甚至达到原生的体验。而新架构的技术核心则是JSI，Turbomodule 也正是基于它来实现的。 介于期望大家能够一起更深入的理解 RN 新架构的亮点，接下来的分享将会从 旧架构 和 新架构的 底层实现开始入手，冒泡式的逐一了解RN框架的原理。 一、Java调用C++ ：JNI 众所周知，JNI 是实现 C++ 与 Java 不...
Android项目集成React-Native
WOL965的博客
02-26 728
        React社区生态圈的加持和Facebook的大力推广后，react native貌似声望颇高。近日得闲，于是想学习学习。类似weex基于三端统一，减少开发成本，RN+原生混合开发，这将是一个不错的选择。 在这之前找了很多资料，但很多并没有走通，填填补补的一路走来费了不少时间，所以写了这篇博客，希望能帮助需要的童鞋。 还没配置环境的童鞋可以到这里去配置环境：环境搭建 环境配置...
React native 拆包
大灰狼的小绵羊哥哥的博客
01-02 496
拆包是React-Native项目不得不面临的一个重要技术门槛。 图片来自网络 为什么要拆包？ bundle文件过大： 一个Helloworld的App，如果使用0.53RN 官方命令react-native bundle打包出来的JSBundle文件大小大约为530KB，RN依赖模块本身占了99.9%。 页面加载慢： 如果使用热更新，从网络获取整个包的下载时间很长，每次进入RN...
React Native Android 源码分析之启动过程
weixin_33727510的博客
07-09 354
前言 阅读之前请先查看准备工作 这篇开始将分析 React Native 0.56-stable 分支 在 Android 端的启动过程是怎么样。 用过 React Native 的小伙伴都知道，React Native 是可以使用 JS 来编写一份代码，并可以同时跑在 Android 和 iOS 两个平台上。那其实核心思想就是 JS 跟 Android 之间建立起一种通信机制。 对于 Andro...
RN拆包解决方案(一) bundle拆分
qq_29622139的博客
01-27 2235
前言 本文是基于react-native 0.55， react 16.3.1版本展开 目的 减少业务包体积（app瘦身） 节省热更新流量 提升模块加载速度 点击查看结构 实现方式 打公用包，包括react-native框架、code-push框架、常用第三方框架、rnlib代码等 打全量bundle包 全量包基于公用包打出差异包（业务包） 共用包和业务包同时引入工程 原生端预先加载共用包，...
RN8302/RN8302B应用笔记：启动潜动参数与分段相位详解
这篇文档是关于RN8302/RN8302B应用笔记的一部分，主要讨论了在电能计量系统中的一些关键参数设置和处理方法，特别是与启动潜动参数和分段相位相关的技术细节。 在5.6启动潜动参数设置部分，说明了电表启动工作的...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Songlcy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值