ReactNative(二)RN拆包，patch補(bǔ)丁爆安，diff差異文件升級方案

RN拆包叛复，patch補(bǔ)丁，diff差異文件升級方案

前瞻

ps:利用5分鐘，讓踩坑與探索時的筆記褐奥，整理一下給大家見個面咖耘，希望有用
Demo在github地址如下：
https://github.com/lijiaxiang/YubaXXDemo

目前已有的思路有以下

1. 侵入RN代碼，修改打包流程抖僵，使得打出來的包就是基礎(chǔ)+業(yè)務(wù)* 包鲤看，如QQ音樂
1. 在RN打包的基礎(chǔ)上，實(shí)現(xiàn)新的打包方案耍群，如攜程 moles-Packer
3.Patch方案义桂，打包流程不變，生成基礎(chǔ)包后蹈垢，根據(jù)diff來生成每個業(yè)務(wù)不同的patch補(bǔ)丁
由于人力慷吊，技術(shù)，以及各個方面不可能滿足前兩種曹抬，我們也隨大流溉瓶，和網(wǎng)上眾多developer一起，用第三種”補(bǔ)丁"方案

這里對第三種 Patch補(bǔ)丁方案進(jìn)行深入的探討和記錄

warning:以下拆包針對rn打出的bundle包谤民，和上一次討論的npm拆模塊不一樣堰酿。

一、設(shè)計(jì)思路:

單元：多個完整的業(yè)務(wù)包张足，只有一個基礎(chǔ)包触创，多個業(yè)務(wù)補(bǔ)丁
通俗理解: 完整的業(yè)務(wù)包(被減數(shù)) 基礎(chǔ)包(減數(shù)) 業(yè)務(wù)補(bǔ)丁(差/補(bǔ)丁)

二、拆包流程：

1.打基礎(chǔ)包(制作commont包”減數(shù)")

<1.創(chuàng)建一個單純的为牍，里面只導(dǎo)入公有庫哼绑。
```
例如index.ios.js，只導(dǎo)入

importReactfrom'react';

import{}from'react-native';
```
<2.然后通過我們以前的打包命令碉咆，打出RN包抖韩，輸出基礎(chǔ)包文件命名為：
```
commont.jsbundle
```
乍眼一看，554kb疫铜，0.37.0的版本茂浮，這個就是最基礎(chǔ)的rn包

2.打完整的業(yè)務(wù)包(制作“被減數(shù)”)

<1.開始在項(xiàng)目中填寫業(yè)務(wù)代碼，形成一個完整的模塊壳咕。

<2.然后通過我們以前的打包命令励稳，打出RN包，輸出完整的業(yè)務(wù)包文件命名為：     

 one.jsbundle和two.jsbundle

3.生成業(yè)務(wù)補(bǔ)丁(制作”差/補(bǔ)丁")

<1.先創(chuàng)建一個.patch文件囱井，例如做one.jsbundle包的補(bǔ)丁命名為one.patch

<2.打開以下網(wǎng)址

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

通過網(wǎng)址在線生成差異文件
左邊放基礎(chǔ)包驹尼，右邊放完整的業(yè)務(wù)包，下面輸出的內(nèi)容庞呕，就是差異內(nèi)容
通過網(wǎng)址在線生成差異文件

<3.copy到one.patch新翎，現(xiàn)在one.patch就是我們的補(bǔ)丁

三程帕、iOS項(xiàng)目如何設(shè)計(jì)

目的：加載完整的業(yè)務(wù)包（我們目前只有基礎(chǔ)包和補(bǔ)丁，要獲取業(yè)務(wù)包）
其實(shí)通俗理解為：減數(shù)(基礎(chǔ)包)＋差（補(bǔ)兜貑）＝被減數(shù)（完整的業(yè)務(wù)包）
這里用到了一個第三方庫愁拭，DiffMatchPatch 是一個國人開源的，OC+C的亏吝，谷歌的算法庫
使用時導(dǎo)入頭文件 DiffMatchPatch.h 即可使用暴露出來的方法
核心代碼如下岭埠，demo已寫出來，運(yùn)行ok蔚鸥。

img

PS：
1惜论、你的ios項(xiàng)目現(xiàn)在更輕量了，rn的bundle包止喷，里面只需要基礎(chǔ)包馆类、業(yè)務(wù)補(bǔ)丁、資源assets文件夾和plist版本文件弹谁。截圖少了一個assets文件夾是因?yàn)閐emo很簡單- -#沒有圖片也沒有版本plist文件

2乾巧、這里僅僅做了本地是否有合成后的文件

   擴(kuò)展：

   <1.我們以后熱更新，只需要更新圖片資源文件夾预愤、plist版本信息文件沟于、和補(bǔ)丁。

   <2.可以本地保存一份文件植康，專門用來記錄合包后的包版本號社裆，與更新下來的包版本對比，若不同向图，再次生成并記錄。做到每一次熱更新／更新app标沪，只合一次包榄攀。

   <3.有了第2步，那么這里的找文件代碼可能要修改一下金句，加一些合成包對應(yīng)的版本判斷檩赢，是否需要重新合并替換。這些都看你自己業(yè)務(wù)需求了～

打補(bǔ)丁時的文件大小變化紀(jì)錄:

img

PS：有人問违寞，為何554301+1278 != 555306

因?yàn)檠a(bǔ)丁文件內(nèi)容贞瞒，有一些附要信息（例如那行有區(qū)別，需要替換）趁曼，這些附要信息合成后不會跟進(jìn)去
寫入過程耗時不可避免军浆，demo簡單，所以寫的快挡闰。
怎么設(shè)計(jì)這個寫入的時機(jī)和過程乒融，我也不啰嗦掰盘，自己下去設(shè)計(jì)吧～