codepush热更新包减小体积-图片资源优化

场景

codepush更新包需要上传bundle+assets，当需要上传资源包体积比较大的情况下，会消耗大量用户流量且有下载失败风险，如出现紧急情况热更新下发率低下会造成极大的影响；那么如何减少更新包体积呢？

改造方案

• 如使用拆包方案，大部分情况下只上传业务bundle，体积大概在50k以下，拆包方案参考RN拆包解决方案(一) bundle拆分
• assets资源优化，出现大量素材资源的情况下需要优化处理，本次着重讲解图片资源加载优化

codepush增量更新图片资源

codepush已经对图片资源进行增量优化，我们来看下它的实现流程:

• 示例1:当前版本1.0.0(1.png、2.png)-应用程序沙盒，热更新后包1.1.0(1.png、2.png)-文档沙盒，codepush需全量下载1.1.0包中的图片
• 示例2:当前版本热更新后为1.1.0(1.png、2.png)-文档沙盒，热更新后包1.2.0(1.png、2.png、3.png)-文档沙盒，如果前后版本(1.png、2.png)md5一致，codepush只会增量下载3.png，将1.1.0中的(1.png、2.png)图片拷贝到1.2.0所在文档沙盒目录中

由此可见，首次热更新仍然需要全量下载消耗大量用户流量，还有更好的方案吗？

assets加载优化

我们可以修改RN图片加载流程，通过文档沙盒目录和本地应用程序目录结合，在更新后，判断当前bundle所在文档沙盒路径下是否存在资源，如果存在直接加载；如果没有，就从本地应用程序沙盒路径中加载代替，如果能这样处理，在没有变更图片资源的情况下，codepush只需要上传bundle文件，资源图片不需要一块打包；若要想修改RN图片加载流程，首先需要了解require图片原理

require引入图片原理

require方式返回的是一个整型， 对应一个define函数, 在bundle中体现为

//引用的地方  require方式
_react2.default.createElement(_reactNative.Image, {
    source: require(305                                      ), __source: {
    // 305 = ./Images/diary_mood_icon_alcohol_32.png
            fileName: _jsxFileName,
            lineNumber: 30
          }
        }),
 // uri 方式
_react2.default.createElement(_reactNative.Image, {
    source: {
    uir: 'https://www.baidu.com/img/bd_logo1.png', width: 100, height: 100 }, __source: {
   
            fileName: _jsxFileName,
            lineNumber: 31
          }
        })
//define地方
__d(/* RN472/Images/diary_mood_icon_alcohol_32.png */function(global, require, module, exports) {
   module.exports=require(161                                         ).registerAsset({
   "__packager_asset":true,"httpServerLocation":"/assets/Images","width":16,"height":16,"scales":[2,3],"hash":"7824b2f2a263b0bb181ff482a88fb813","name":"diary_mood_icon_alcohol_32","type":"png"}); // 161 = react-native/Libraries/Image/AssetRegistry
}, 305, null</