RN JSBundle 拆分解决方案（3）: 固定ModuleId，JSBundle按需加载

最新推荐文章于 2025-06-25 09:14:26 发布
置顶 最新推荐文章于 2025-06-25 09:14:26 发布
阅读量3.6k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
文章标签： React Native JSBundle 拆包 差异化解决方案 RN拆包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013718120/article/details/84647230
本文详细介绍了React Native (RN) JSBundle的拆分解决方案，包括固定ModuleId以实现按需加载。通过分析不同RN版本的打包工具，如metro-bundler的修改，展示了如何在0.50到最新版本中实现模块路径作为ID。此外，文章还阐述了如何打包基础模块和业务模块，以及如何利用Linux命令`comm`进行文件差异比较，生成业务模块独有的代码。最后，讨论了如何在Android端按需加载JSBundle，实现秒开视图的目标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

实践源码：react-native-split-bundle：https://github.com/songxiaoliang/react-native-split-bundle

前面两篇文章分别从源码加载、Bundle文件结构、Metro打包工具等做了简单分析，逐步了解关于RN打包，Bundle 文件加载的相关内容。本篇内容将结合代码来完成最终的实现方案。在阅读该篇博客内容前，可以点击如下查看：

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

（2）JSBundle 文件、打包工具 Metro 的结构分析

在《RN JSBundle 拆分解决方案（2）: JSBundle 、Metro 结构分析

了解本专栏 订阅专栏 解锁全文 超级会员免费看
RN JSBundle 拆分解决方案（1）: 应用启动、视图加载原理解析
...
02-22 3942
前两篇文章和大家分享了RN中的触摸事件机制。链接如下： React Native 手势触摸事件机制详解（基础篇） React Native 手势触摸事件机制详解（进阶篇） 接下来的系列内容将结合 Android 原生层来分析拆包解决方案。如果你具有Android原生开发经验，并且在实践 Android + RN 的混合模式开发，那么这次连载的文章内容你一定喜欢。拆包解决方案的系列内容目录大致...
RN JSBundle 拆分解决方案（2）: JSBundle 、Metro 结构分析
...
11-27 4950
  在第一篇（RN JSBundle 拆分解决方案（1）: 应用启动、视图加载原理解析）中我们对RN的启动、视图加载流程从源码角度做了简单的梳理。本篇内容我们继续对JSBundle 文件内容结构，以及当前RN框架默认的打包工具 Metro 进行分析。 JSBundle 文件结构 当我们执行 react-native bundle | unbundle 命令时，RN框架会按照当前给定的参数，打...
同app下多个react-native jsBundle的解决方案
weixin_33682790的博客
04-25 889
在 react-native (以下称RN)还是0.39的时候，我们开始着手构建了一个纯RN app，之后由于长列表的性能问题，进行了一次更新，将版本更新到了0.46，并一直维持 。直到前段时间，遇到了一个新的需求，要把隔壁部门用RN写的一个app(以下称为B app)的一部分业务嵌入我们的app中。由于B app的业务重度依赖路由，而B...
深入理解umijs/father中的构建模式：Bundless与Bundle详解
最新发布
gitblog_00433的博客
06-25 309
深入理解umijs/father中的构建模式：Bundless与Bundle详解 前言 在现代前端开发中，构建工具的选择和配置对项目质量有着至关重要的影响。作为一款优秀的构建工具，umijs/father提供了两种主要的构建模式：Bundless和Bundle。本文将深入解析这两种构建模式的工作原理、适用场景以及如何在实际项目中进行选择。 Bundless构建模式解析 什么是Bundless模式 ...
2020-11-24
qq_52106738的博客
11-24 169
模块： 模块是一组Python代码的集合，可以使用其他模块，也可以被其他模块使用。 创建自己的模块时，要注意： 模块名要遵循Python变量命名规范，不要使用中文、特殊字符； 模块名不要和系统模块名冲突，最好先查看系统是否已存在该模块，检查方法是在Python交互环境执行import abc，若成功则说明系统存在此模块。 #!/usr/bin/env python3 # 第1行注释可以让这个hello.py文件直接在Unix/Linux/Mac上运行 -- coding: utf-8 -- # 第2行
ReactNative 通信机制（Android）
tongxintong的专栏
08-12 1049
https://zhuanlan.zhihu.com/p/45837390先线上膝盖，网络上讲解最清晰的，没有之一，怕被删，故做收藏，另有作者专栏https://www.zhihu.com/column/react-native-tips 在介绍完RN的背景、实践以及整体架构后，下面我们来聊一聊RN Android端的源码。本文首先会介绍RN在Android端的初始化流程，紧接着介绍JSBundle的加载流程以及NativeModules的初始化过程，最后会介绍三端通信。 一、Android端的初始化.
RN拆包解决方案(一) bundle拆分
qq_29622139的博客
01-27 2363
前言 本文是基于react-native 0.55， react 16.3.1版本展开 目的 减少业务包体积（app瘦身） 节省热更新流量 提升模块加载速度 点击查看结构 实现方式 打公用包，包括react-native框架、code-push框架、常用第三方框架、rnlib代码等 打全量bundle包 全量包基于公用包打出差异包（业务包） 共用包和业务包同时引入工程 原生端预先加载共用包，...
RN拆包解决方案(二) bundle加载
qq_29622139的博客
01-27 1287
前言 本文跟随上一篇RN拆包解决方案(一) bundle拆分，已打出common.bundle和patch.bundle文件为前提，引入工程项目中 iOS原生加载流程 RCTBridge开放私有方法 @interface RCTBridge (ReactExecuteScript) - (void)executeSourceCode:(NSData *)sourceCode sync:(BOOL...
React Native启动流程
kakaxiqianxin的专栏
06-12 848
1.首先看ReactActivity，在他的构造方法里可以看到ReactActivityDelegate protected ReactActivity() { mDelegate = createReactActivityDelegate(); } /** * Called at construction time, override if you have a...
分析网页 JavaScript Bundles 的几种方法
azl397985856的专栏
08-28 455
分析你网页中的 JavaScript Bundles 大小，并限制网页中的 JavaScript 数量，可以减少浏览器花费在解析、编译和执行 JavaScript 的时间。这可以加快浏...
前端开发中常说的 bundle 是什么？
winfield821的博客
06-11 7095
通过使用捆绑工具（如Webpack、Parcel、Rollup等），可以将这些源文件打包为一个或多个捆绑包文件。捆绑工具会分析源文件之间的依赖关系，并将它们合并为一个文件，通常是一个 JavaScript 文件（称为主捆绑包），其中包含了所有的代码和资源。在前端开发中，“bundle”（捆绑包）是指将多个源文件（例如 JavaScript、CSS、图像等）合并为单个文件的过程和结果。捆绑包的目的是将多个文件捆绑在一起，以便在浏览器中更高效地加载和传输。
RN拆包解析
郝捷的专栏
01-14 1202
一. 拆包动机 RN作为非常优秀的移动端跨平台开发框架，在近几年得到众多开发者的认可。国内各大厂采用在当前原生应用内集成RN的方式，使得App应用的灵活性得到了很大的提升。在原生应用内嵌入RN，就是需要在原生应用内加载RN模块（1个或多个JSBundle），并得以显示。JSBundle中包含了当前RN模块的js代码。如果存在多个RN模块需要被加载时，就需要分别打出多个JSBundle，并且多个JS...
前端js框架引入管理bundle.js
weixin_34109408的博客
02-16 2285
最先在ionic中看到bundle.js,,,然而它不是一个框架 转载于:https://www.cnblogs.com/Unknw/p/6403990.html
如何在MainActivity中使用ReactApplicationContext,让android 可以在原生任何一处向RN上层发送通知
qq_33539839的博客
10-16 3240
如何在MainActivity中使用ReactApplicationContext,让android 可以在原生任何一处向RN上层发送通知 例如我们app启动的Activity为MainActivity，而MainActivity这里需要继承ReactActivity，然后我们来点进去看下ReactActivity具有的方法，除了通用的activity的生命周期方法， 这里有一个方法: ...
React Native打包代码解析与拆分Bundle做法
大灰狼的小绵羊哥哥的博客
04-23 7685
本文的RN代码基于0.43版本  https://blog.desmondyao.com/rn-split/ 一般应用React Native(RN)后，随着使用页面的增加，bundle包（携带资源）会逐渐加大，这会带来以下两个缺点： 页面启动速度&内存占用增加 这是不言而喻的，一个页面启动时会加载其他无关页面的代码，自然会有内存占用加大、启动时间增加的问题，这部分的消耗是不应该的。更
React Native基于最新版本实现JsBundle预加载，解决白屏等待，界面秒开优化
热门推荐
...
05-10 1万+
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 前些时间和大家分享了一系列关于React Native For Android的文章。这两天又对React Native增量热更新的博客进行了填充，增加了图片增量更新的实现方案和过程。有兴趣的朋友可以去浏览详细内容。为了方便，我将前几篇的博客链接贴出来供大家参考： Android原生项目集成React Native...
关于RN热更新-iOS端捕获加载jsbundle异常解决方案
aishi9935的博客
10-25 623
1.监听加载jsbundle异常的处理 模拟情况：合并增量后jsbundle文件出现部分错误调试发现当加载jsbundle出现异常时，RN模块RCTBatchedBridge.m中如下代码会执行： - (void)stopLoadingWithError:(NSError *)error { RCTAssertMainThread(); if (!self....
ReactNative多bundle加载
bobby_fu的博客
02-17 1156
package com.meicai.react.bridge.activity; import android.os.Bundle; import android.view.KeyEvent; import com.facebook.react.ReactActivity; import com.facebook.react.ReactInstanceManager; import com....
React native拆包之 原生加载多bundle（iOS&Android）
tyro_smallnew的专栏
11-02 9629
在这之前已经描述了0.57版本的react native如何拆包：https://blog.youkuaiyun.com/tyro_smallnew/article/details/83088216（React native拆包的正确姿势），对于原生如何加载多个js包的方法只是简单的描述下，现在开始补坑。 0、rn之jsbundle     当然我们都知道jsbundle是什么(就是我们打包出来的js包，...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Songlcy

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

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

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

打赏作者

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

抵扣说明：

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

余额充值