关于ReactNative多分包的调研记录

最新推荐文章于 2024-12-24 14:29:17 发布
最新推荐文章于 2024-12-24 14:29:17 发布
阅读量588 收藏 1
点赞数 1
分类专栏： ReactNative 文章标签： ReactNative  多分包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TaooLee/article/details/86705957
版权
本文调研了ReactNative应用中采用多分包的必要性和不同方案，旨在优化性能、减少流量消耗并提高用户体验。从Facebook的讨论到QQ音乐、58同城、携程等公司的实践，以及Facebook的unbundle和prepack优化，文章分析了各种策略的优缺点。目前，常见的解决方案包括侵入式修改打包流程、创建新的打包方案以及基于patch的业务包生成。热更新方案如CodePush和Pushy也被提及作为补充。

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

之前的调研内容，整理一下保存在csdn.

1是否有必要多分包
github的讨论 https://github.com/facebook/react-native/issues/5399#issuecomment-173058746

好处：

  • 避免执行大量JS代码带来的性能瓶颈
  • 减少更新时的流量消耗
  • 业务分离，按需加载，实现webBundle，即用即载入
  • 优化载入时间，提高用户体验
  • 解开依赖关系，提高开发效率

2国内几家公司的多分包方案及现状

最低0.47元/天 解锁文章
React Native采用Hermes热更新打包实战
xiangzhihong8的专栏
05-18 702
1， 背景 如果我们打开RN的Android源码，在build.gradle中回看到这样一段代码。 if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImplementation files(hermesPath
React Native性能优化红宝书
franktaoge的博客
06-20 1851
我们使用 useCallback 来保证在 ParentComponent 的多次渲染中，incrementCount 函数的引用是不变的，这样 ChildComponent 就不会因为 ParentComponent 的渲染而不必要地重新渲染。如果你有一个子组件，它是纯的（不依赖外部状态，只依赖于传入的 props），并且你希望避免非必要的重渲染，你可以使用 useCallback 来保证传递给子组件的函数引用保持不变。因此，性能非常的低，更好的办法是将CSS文件导入组件。
React Native 拆包思想
weixin_44216461的博客
11-20 1431
在这里使用 Metro 的方式进行拆包，拆包的目的是可以按业务需要进行按需加载，同时可以热更新和热修复。 分包思路为：基础包+业务包1+业务包2+…。 由上面可以看到，app有原来的一个bundle分拆为多个，在app启动的时候，先加载公共部分bundle，启动之后按需加载业务bundle。每个bundle都对应一个容器，在android里面是Activity，而在iOS里面是ViewController。那么就可以理解为把之前单容器bundle的app，拆分为多个容器加载。 规划代码拆分 在进行bund
React Native 分包实践
mazaiting的博客
10-10 1175
1. 实现思路 1. RN从本地中读取bundle文件进行显示 2. 将JS文件进行分包打包 3. Native实现页面跳转，每个包跳转都为一个新的Activity 4. 进行bundle文件基础包与功能包的拆分，使用Google的diff_match_patch算法生成差异文件 5. 网络下载差异文件进行合并 6. 展示新页面 2. 操作步骤 Andr...
ReactNaive分包方法
大灰狼的小绵羊哥哥的博客
01-03 1535
ReactNaive分包方法 RN中，发布js代码时，会打包成jsbundle形式。随着业务的增大，jsbundle体积也会逐渐增大，特别是多Module场景下，会生成多个jsbundle（包含相同的基础）。不仅增加APP、热更新包体积，也对jsbundle的加载效率造成很大影响。针对jsbundle的拆包，成为集成RN必须考虑的问题。 拆包目的 解决jsbundle体积过大 按需分步加载...
React Native 分包及在iOS端分包加载
weixin_42433480的博客
04-02 1930
但是我司的项目是在Hybrid的基础上添加React Native模块，还需要热更新， 为了每次热更新包的大小是尽可能小的， 所以需要使用分包加载。3. 还有一个比较重要的点，由于公共包和业务包是分开加载的，需要加载完公共包再加载业务包，还要求速度要尽可能快，网上有些说一启动App就用初始化Bridge加载公共包，我认为这是一种很懒的处理方式，会很耗性能，我这里采用的是监听加载完公共包的通知，一旦收到加载完公共包的通知，就开始加载业务包。我这里使用的是基于Metro的分包方法，也是市面上主要使用的方法。
React Native 分包哪家强？看这文就够了！
程序人生的博客
01-16 2855
作者 | 魔笛责编 | 伍杏玲前景自2015年Facebook发布React Native以来，目前已经是跨平台开发的主流产品，但是随着业务复杂度越来越高，单一的JSBu...
React Native性能优化方案(新旧架构对比，只看这一篇文章即可拿下面试官)
最新发布
qq_29896351的博客
12-24 1613
在 或 中，减少组件的重新渲染是优化性能的关键。以下是一些减少不必要重新渲染的方法： 如果 未改变，组件不会重新渲染。 避免匿名函数和内联对象 匿名函数或内联对象在每次渲染时都会生成新的引用，可能触发子组件的重新渲染。 问题示例 解决方案 确保函数引用在依赖不变时保持稳定。 使用 缓存计算值 复杂的计算结果可以通过 缓存，避免每次渲染都重新计算。 合理使用 或 对于类组件，可以通过 或 控制是否需要重新渲染。 使用 提高列表性能 在列表渲染中，确保 唯一且稳定，避免
React Native 拆分业务包 bundle拆包 分包 携程方案
大灰狼的小绵羊哥哥的博客
07-13 5404
引言 http://www.jianshu.com/p/333e11dbdc62 React Native以其独到的特性，吸引着互联网公司纷纷为之投入或多或少的人力。在实际的开发过程中，开发者们也确实尝到了甜头，它的组件化思想、热更新机制 以及jsx和es6等的引入，都给开发者们带来了很大的便利。也难怪在npm和github上，每天都会有很多react-native的新模块出现。这也充分表明
使用React Native Split Bundle提升移动应用性能与可维护性
gitblog_00063的博客
04-06 368
使用React Native Split Bundle提升移动应用性能与可维护性 去发现同类优质开源项目:https://gitcode.com/ 项目简介 是一个由宋晓梁开发的开源项目，它为React Native开发者提供了一种智能的代码分包解决方案。通过自动将大型的应用模块拆分为多个小的、独立的bundle，React Native Split Bundle有助于减少初始加载时间，从而改善用...
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
react-native实现不重启App的情况下更新分包
爬不上树的小松鼠
09-29 1649
之前研究过重启App情况下进行热更新，现在升级为：在不更新App的情况下更新某个模块
React Native 多包管理器（react-native-multibundler）教程
gitblog_00837的博客
08-10 424
React Native 多包管理器（react-native-multibundler）教程 项目地址:https://gitcode.com/gh_mirrors/re/react-native-multibundler 1. 项目介绍 react-native-multibundler 是一个基于 React Native 的 Metro Bundler 的配置化分包解决方案。它支持 iOS...
React Native 多Bundle拆包工具 —— react-native-multibundler
gitblog_00887的博客
11-27 842
React Native 多Bundle拆包工具 —— react-native-multibundler react-native-multibundler react native可视化bundle拆包,支持远程加载和debug,支持官方的0.57~0.63.2版本,使用官方的metro拆包,适用于Android、i...
creat-react-app中的分包
weixin_38267121的博客
05-23 2830
dsa
ReactNative学习问题笔记二：apk分包、运行时报“ verifyError”异常
fushiming的博客
06-01 527
RN工程编译成功，run-android调试时，报verfyError异常，这个异常描述比较模糊，网上查找问题原因验证都不搭嘎，后来解压apk，反编译dex文件发现有一些class为空，这些class与v4包都有关系，后来猜测和v4包的引用有关系。 我的结论：apk方法数过多分包时，由于引用的第三方aar包中有v4包，rn android包中也有v4包，这样打包时dex中的会有class为空
React native拆包的正确姿势——基于metro bundle
tyro_smallnew的专栏
10-16 9636
1、分包   观察现在一些接入React native的大厂，如菜鸟、大搜车、去哪儿，都将react native 的jsbundle分为几个包来使用。作用是啥？为什么要这么折腾？像去哪儿、腾讯或者携程都发布了一些文章来阐述分包的原因了，不了解的可以去搜索看看。我这边只总结下：react native原生打出来的包都只有一个jsbundle(除了rambundle)，里面包含了所有你写代码和re...
ReactNative开发工具有这一篇足矣
DerWeltraum
02-06 6532
转自：https://juejin.im/post/5a6460f8f265da3e4f0a446d 一 原理概览 当你拿到React Native的源码的时候，它的目录结构是这样的： jni：ReactNative的好多机制都是由C、C++实现的，这部分便是用来载入SO库。 perftest：测试配置 proguard：混淆 quicklog：log输出 react：ReactN
React Native 多分包方案常见问题解决方案
gitblog_00503的博客
11-25 478
React Native 多分包方案常见问题解决方案 react-native-multibundler react native可视化bundle拆包,支持远程加载和debug,支持官方的0.57~0.63.2版本,使用官方的metro拆包,适用于Android、iOS ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值