ReactNative(二)RN拆包，patch补丁，diff差

2018-01-19 本文已影响76人 XXViper

RN拆包，patch补丁，diff差异文件升级方案

前瞻

ps:利用5分钟，让踩坑与探索时的笔记，整理一下给大家见个面，希望有用
Demo在github地址如下：
https://github.com/lijiaxiang/YubaXXDemo

目前已有的思路有以下

1. 侵入RN代码，修改打包流程，使得打出来的包就是基础+业务* 包，如QQ音乐
1. 在RN打包的基础上，实现新的打包方案，如携程 moles-Packer
3.Patch方案，打包流程不变，生成基础包后，根据diff来生成每个业务不同的patch补丁
由于人力，技术，以及各个方面不可能满足前两种，我们也随大流，和网上众多developer一起，用第三种”补丁"方案

这里对第三种 Patch补丁方案进行深入的探讨和记录

warning:以下拆包针对rn打出的bundle包，和上一次讨论的npm拆模块不一样。

一、设计思路:

单元：多个完整的业务包，只有一个基础包，多个业务补丁
通俗理解: 完整的业务包(被减数) 基础包(减数) 业务补丁(差/补丁)

二、拆包流程：

1.打基础包(制作commont包”减数")

<1.创建一个单纯的，里面只导入公有库。
```
例如index.ios.js，只导入

importReactfrom'react';

import{}from'react-native';
```
<2.然后通过我们以前的打包命令，打出RN包，输出基础包文件命名为：
```
commont.jsbundle
```
乍眼一看，554kb，0.37.0的版本，这个就是最基础的rn包

2.打完整的业务包(制作“被减数”)

<1.开始在项目中填写业务代码，形成一个完整的模块。

<2.然后通过我们以前的打包命令，打出RN包，输出完整的业务包文件命名为：     

 one.jsbundle和two.jsbundle

3.生成业务补丁(制作”差/补丁")

<1.先创建一个.patch文件，例如做one.jsbundle包的补丁命名为one.patch

<2.打开以下网址

https://neil.fraser.name/software/diff_match_patch/svn/trunk/demos/demo_patch.html

通过网址在线生成差异文件
左边放基础包，右边放完整的业务包，下面输出的内容，就是差异内容
通过网址在线生成差异文件

<3.copy到one.patch，现在one.patch就是我们的补丁

三、iOS项目如何设计

目的：加载完整的业务包（我们目前只有基础包和补丁，要获取业务包）
其实通俗理解为：减数(基础包)＋差（补丁）＝被减数（完整的业务包）
这里用到了一个第三方库，DiffMatchPatch 是一个国人开源的，OC+C的，谷歌的算法库
使用时导入头文件 DiffMatchPatch.h 即可使用暴露出来的方法
核心代码如下，demo已写出来，运行ok。

img

PS：
1、你的ios项目现在更轻量了，rn的bundle包，里面只需要基础包、业务补丁、资源assets文件夹和plist版本文件。截图少了一个assets文件夹是因为demo很简单- -#没有图片也没有版本plist文件

2、这里仅仅做了本地是否有合成后的文件

   扩展：

   <1.我们以后热更新，只需要更新图片资源文件夹、plist版本信息文件、和补丁。

   <2.可以本地保存一份文件，专门用来记录合包后的包版本号，与更新下来的包版本对比，若不同，再次生成并记录。做到每一次热更新／更新app，只合一次包。

   <3.有了第2步，那么这里的找文件代码可能要修改一下，加一些合成包对应的版本判断，是否需要重新合并替换。这些都看你自己业务需求了～

打补丁时的文件大小变化纪录: