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

置顶 2018-11-30 12:56:28 2905 收藏
分类专栏： React Native 实践进阶 文章标签： React Native JSBundle 拆包 差异化解决方案 RN拆包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013718120/article/details/84647230
版权

 

实践源码：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 结构分析》中，我们围绕 Bundle 文件结构，Metro 打包工具做了很多的分析描述。实现拆包方案的核心原理，一句话概括的说，就是将 Bundle 文件的

了解本专栏 订阅专栏 解锁全文
Songlcy
关注
  • 2
    点赞
  • 5
    评论
  • 0
    收藏
  • 一键三连
    一键三连

  • 扫一扫，分享海报

打赏
文章很值，打赏犒劳作者一下
RN JSBundle 拆分解决方案（2）: JSBundle 、Metro 结构分析
Songlcy
11-27 3669
  在第一篇（RN JSBundle 拆分解决方案（1）: 应用启动、视图加载原理解析）中我们对RN的启动、视图加载流程从源码角度做了简单的梳理。本篇内容我们继续对JSBundle 文件内容结构，以及当前RN框架默认的打包工具 Metro 进行分析。 JSBundle 文件结构 当我们执行 react-native bundle | unbundle 命令时，RN框架会按照当前给定的参数，打...
表情包
插入表情
还能输入1000个字符
相关推荐
React Native JSBundle拆包之原理篇
xiangzhihong8的专栏
12-14 3104
概述 RN作为一款非常优秀的移动端跨平台开发框架，在近几年得到众多开发者的认可。纵观现在接入RN的大厂，如qq音乐、菜鸟、去哪儿，无疑不是将RN作为重点技术栈进行研发。 不过，熟悉RN的开发者也知道，早期的RN版本中打出来的包都只有一个jsbundle，而这个jsbundle里面包含了所有代码（RN源码、第三方库代码和自己的业务代码）。如果是纯RN代码倒没什么关系，但大部分的大厂都是在原生应用内接...
将ReactNative项目打包生成jsbundle
覃大畅的博客
03-26 4985
在进行原生开发时，我们可能需要在原生项目加载RN的代码，那么需要将RN项目打包成jsbundle文件，然后由原生对此引用。 打包命令详情： 使用 react-native bundle --help 来查看打包的具体参数 react-native bundle [参数] 构建 js 离线包 Options: 　　-h, --help 输出如何使用的信息 　　--entry-file <pat...
React Native 拆分业务包 bundle拆包 分包 携程方案
大灰狼的小绵羊哥哥的博客
07-13 4640
引言 http://www.jianshu.com/p/333e11dbdc62 React Native以其独到的特性，吸引着互联网公司纷纷为之投入或多或少的人力。在实际的开发过程中，开发者们也确实尝到了甜头，它的组件化思想、热更新机制 以及jsx和es6等的引入，都给开发者们带来了很大的便利。也难怪在npm和github上，每天都会有很多react-native的新模块出现。这也充分表明
【React Native】一个简单的拆分Bundle&资源做法
魔都三帅
04-24 936
本文的RN代码基于0.43版本一般应用React Native(RN)后，随着使用页面的增加，bundle包（携带资源）会逐渐加大，这会带来以下两个缺点：页面启动速度&内存占用增加 这是不言而喻的，一个页面启动时会加载其他无关页面的代码，自然会有内存占用加大、启动时间增加的问题，这部分的消耗是不应该的。更新流量消耗增加 要更新某块代码必须下发整个bundle，尽管只更新其中1/10部分的代码。官方
React native拆包的正确姿势——基于metro bundle
tyro_smallnew的专栏
10-16 7788
1、分包   观察现在一些接入React native的大厂，如菜鸟、大搜车、去哪儿，都将react native 的jsbundle分为几个包来使用。作用是啥？为什么要这么折腾？像去哪儿、腾讯或者携程都发布了一些文章来阐述分包的原因了，不了解的可以去搜索看看。我这边只总结下：react native原生打出来的包都只有一个jsbundle(除了rambundle)，里面包含了所有你写代码和re...
react-native报错信息之Can't find variable
追梦猪的博客
09-19 1026
在前端的路途上遇见了react-native，正如我带你如初恋你却虐我千百边，所有把爬坑的错误记录下拉供后面的小伙伴学习分享！在进行路由导航配置的时候出现了找不到变量（Can'tfindvariable）Can'tfindvariable:Button如下...
ReactNative踩坑之旅: Unable to resolve module 和 Error: Plugin
嘎啦嘎啦
07-13 4万+
具体流程请看这个, 感谢分享: https://blog.csdn.net/qiyei2009/article/details/78820207 在搭建的过程中碰见了很多问题, 大多数简单的搜索就可以解决, 但有两个较难排查, 现在记录于下 ps. 建议别用windows自带的命令行, 出现问题后报错信息不能复制是个坑, 建议用WebStorm自带的Terminal, 自动转入项目路径, ...
《React-Native系列》40、 ReactNative之bundle文件瘦身
等待就是浪费青春
10-31 7314
【背景】目前，我们的app中采用Native+RN的混合模式开发，每个由RN开发的页面，页面的加载都是加载的一个Bundle文件，而一个Bundle文件的大小为500-600Kb。在没有内置bundle文件的情况下，用户想要使用所有由RN开发的功能，需要下载 n* 500 kb的文件。在有内置bundle文件的情况下，如果一个页面有更新，那么用户至少需要下载500kb的文件。在移动端，频繁的需要去
一种强大、可靠的React Native拆包以及热更新方案，基于CodePush，Metro
weixin_45365889的博客
09-30 763
背景需求 因为需要将各业务线通过划分jsbundle的形式进行分离，以达到 各个业务包独立更新、回滚以及版本管控 增量加载，优化启动速度 优化增量更新，只对单独某一业务包增量更新 案例参考 参考了携程以及各种网络版本的做法，大致总结为三种 修改RN打包脚本，使其支持打包时生成基础包以及业务包，并合理分配moduleID（携程方案） 优点：定制化高，性能优化好，可以做到增量加载 缺...
RN JSBundle 拆分解决方案（1）: 应用启动、视图加载原理解析
Songlcy
02-22 3167
前两篇文章和大家分享了RN中的触摸事件机制。链接如下： React Native 手势触摸事件机制详解（基础篇） React Native 手势触摸事件机制详解（进阶篇） 接下来的系列内容将结合 Android 原生层来分析拆包解决方案。如果你具有Android原生开发经验，并且在实践 Android + RN 的混合模式开发，那么这次连载的文章内容你一定喜欢。拆包解决方案的系列内容目录大致...
React Native打包代码解析与拆分Bundle做法
大灰狼的小绵羊哥哥的博客
04-23 6488
本文的RN代码基于0.43版本  https://blog.desmondyao.com/rn-split/ 一般应用React Native(RN)后，随着使用页面的增加，bundle包（携带资源）会逐渐加大，这会带来以下两个缺点： 页面启动速度&内存占用增加 这是不言而喻的，一个页面启动时会加载其他无关页面的代码，自然会有内存占用加大、启动时间增加的问题，这部分的消耗是不应该的。更
rn打包以及更新线上bundle包
qq_15873073的博客
09-12 3328
rn默认是从本地server获取最新的代码和资源，但是项目要上线的话打包必不可少，rn打包更新的大致流程如下： 1.按照rn官方的方式生成签名 2.生成离线包：react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets
React Native工程离线运行（ios）
Lotheve的私房菜
01-29 5356
React Native工程离线运行的重点是将index.ios.bundle文件保存在机器本地，index.ios.bundle文件是工程编译后的js文件的打包，index.ios.bundle 将被 packager服务器 创建。。纯RN工程纯RN工程在工程创建好后就XCode目录中就包含了main.jsbundle文件，只不过文件是不存在的（XCode文件名红色），这个文件就是编译的时候由pa
CSDN开发者助手，常用网站自动整合，多种工具一键调用
CSDN开发者助手由CSDN官方开发，集成一键呼出搜索、万能快捷工具、个性化新标签页和官方免广告四大功能。帮助您提升10倍开发效率！
ReactNative - mian.jsbundle生成
江苏小白龙
04-09 782
我项目是ios原生集成了rn然后什么都完成了卡在了生成离线包这一个关上面,按照官方文档没能成功在网上也都是千篇一律的 curl http://localhost:8081/index.ios.bundle -o main.jsbundle生成main.jsbundle 方法而且都不怎么完整遇到问题也没回复我比如: 比如你需要先将项目运行起来打开服务器也就是cd到你的项目根目录执行 npm s...
React Native 之 main.jsbundle生成方法
chirs的专栏
02-05 1万+
坚持 成长 每日一篇步骤：1.在React Native项目根目录下运行 npm start2.使用curl命令生成 main.jsbundlecurl http://localhost:8081/index.ios.bundle -o main.jsbundle3.在AppDelegate.m中选择使用main.jsbundle 注释掉 jsCodeLocation = [NSURL URLW
ReactNative手动生成JSBundle文件
chenzhen200638的专栏
10-16 3823
一、根目录下有个package.json文件{ "name": "rncenter", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", /
ReactNative中把js编译成bundle后，js引用的图片的去向
non_attack的博客
02-23 3608
这篇文章我们来讲解，使用react-native bundle 命令将js文件编译成bundle文件后，ReactNative（以下简称RN）对我们的Android工程都做了什么
React Native 分包实践
mazaiting的博客
10-10 578
1. 实现思路 1. RN从本地中读取bundle文件进行显示 2. 将JS文件进行分包打包 3. Native实现页面跳转，每个包跳转都为一个新的Activity 4. 进行bundle文件基础包与功能包的拆分，使用Google的diff_match_patch算法生成差异文件 5. 网络下载差异文件进行合并 6. 展示新页面 2. 操作步骤 Andr...
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页

打赏

Songlcy

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值