【背景】

目前，我們的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,它可以對文字檔案進行比較、匹配和生成補丁的操作。

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 檔案內容如下：

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檔案瘦身的目的。