ReactNative之bundle文件瘦身（google-diff-match-patch）

【背景】

目前，我们的app中采用Native+RN的混合模式开发，每个由RN开发的页面，页面的加载都是加载的一个Bundle文件，而一个Bundle文件的大小为500-600Kb。

在没有内置bundle文件的情况下，用户想要使用所有由RN开发的功能，需要下载 n* 500 kb的文件。

在有内置bundle文件的情况下，如果一个页面有更新，那么用户至少需要下载500kb的文件。

在移动端，频繁的需要去下载500kb大小的文件，是无法被接受的。

 

【目的】

1、控制bundle资源包的大小，为内置安装包瘦身

2、减小页面更新bundle文件大小，减少App端下载bundle的流量

 

【详细设计】

 1）google-diff-match-patch简介：

要对文本文件的进行比较的时候，可以考虑使用google-diff-match-patch,它可以对文本文件进行比较、匹配和生成补丁的操作。

他的官网是：http://code.google.com/p/google-diff-match-patch/

使用google diff的话，这个差异就是从左边的字符串变成右边的字符串所需要的最少的步骤，每个步骤只能做“保持不变”、“插入”或者“删除”操作。

使用入门可以参考：http://blog.csdn.net/codetomylaw/article/details/52872065

2）bundle文件拆分方案：



 

commonPart.bundle生成的方法如下：(Android 和 iOS的commonPart
需要分开生成)

curl 'http://localhost:8081/blank.ios.bundle?minify=true&dev=false'  -o common.ios.bundle

其中blank.ios.js 文件内容如下：

[javascript] view
plain copy

 





import React, { Component } from 'react';  

import {} from 'react-native';  

拆分完成后的bundle示意图如下：



 

3）bundle文件diff和patch流程



  

【资源打包】

提供一个shell，可以支持bundle文件的diff，生成patch文件，并对其zip压缩。

使用效果如下：



【效果】



可以看到，bundle文件由560kb 缩小到了15kb。

综合以上，就达到了bundle文件瘦身的目的。