一、reactnative的热更新基本流程是在服务端通过差分运算生成增量包
客户端拿到增量包后通过差分运算合成新的本地包
二、以下模拟一下服务端和客户端的流程
1. 安装bsdiff
brew install bsdiff
注:需先安装homebrew mac版的包管理器
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装成功后如下图
2.模拟服务端生成patch包
先生成一个jsbundle的离线包
react-native bundle --entry-file ./index.js --bundle-output ./dist/index.jsbundle --dev false --assets-dest ./dist
重命名为index1.jsbundle
然后修改首页的几个快捷按钮的标题
然后再运行离线包命令生成index2.jsbundle
使用bsdiff
bsdiff oldfile newfile patchfile
oldfile: 旧的文件
newfile:新的文件
patchfile:生成的差异文件
bsdiff index1.jsbundle index2.jsbundle old-new.patch
在当前路径生成old-new.patch增量文件
查看index2.jsbundle的md5值
MD5 (index2.jsbundle) = 31b955e661e33bdc8949bb0a6804e26a
3.客户端合成新包,使用bapatch
bspatch oldfile newfile2 patchfile
oldfile:旧的文件
newfile2:生成的新的文件
patchfile:差异文件
bspatch index1.jsbundle new.jsbundle old-new.patch
在当前路径生成new.jsbundle
查看new.jsbundle的md5值
MD5 (new.jsbundle) = 31b955e661e33bdc8949bb0a6804e26a
可以看到index2.jsbundle和new.jsbundle的md5值相同,是同一个文件
4.在客户端运行new.jsbundle的效果如 标题后加1.png
三、参考文档
四、系列文章
ReactNative使用Navigation构建完整应用(一)
ReactNative使用Navigation构建完整应用(二)