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/

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

 

1. import React, { Component } from 'react';  
2. import {} from 'react-native';  

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

3）bundle文件diff和patch流程

【资源打包】

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

使用效果如下：

【效果】

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

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