ReactNative使用Navigation构建完整应用(四)基于bsdiff算法的增量更新

一、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

然后修改首页的几个快捷按钮的标题


标题后加1.png

然后再运行离线包命令生成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

三、参考文档

badiff的编译与使用

react-native-pushy

二进制差异文件

四、系列文章

ReactNative使用Navigation构建完整应用(一)

ReactNative使用Navigation构建完整应用(二)

ReactNative使用Navigation构建完整应用(三)

ReactNative使用Navigation构建完整应用(四)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容