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

前瞻

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

目前已有的思路有以下

• 1. 侵入RN代码，修改打包流程，使得打出来的包就是基础+业务* 包，如QQ音乐
• 2. 在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步，那么这里的找文件代码可能要修改一下，加一些合成包对应的版本判断，是否需要重新合并替换。这些都看你自己业务需求了～
  

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

  
  img
  

  PS：有人问，为何554301+1278 != 555306

• 因为补丁文件内容，有一些附要信息（例如那行有区别，需要替换），这些附要信息合成后不会跟进去

• 写入过程耗时不可避免，demo简单，所以写的快。
  怎么设计这个写入的时机和过程，我也不啰嗦，自己下去设计吧～

四、surprised！看看我们打补丁前的文件大小和打补丁后的文件大小!

基础包：

img

两个补丁的大小

img
img

两个完整业务包的大小:

img
img

以及通过补丁＋基础包的打补丁方式生成的本地大小：

img