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, "RN472/Images/diary_mood_icon_alcohol_32.png");

我们看到打包的时候,require图片会转换成如下格式的对象保存:

{
    "__packager_asset":true,  //是否是asset目录下的资源
    "httpServerLocation":"/assets/Images", //server目录地址
    "width":16, 
    "height":16,
    "scales":[2,3], //图片scales   
    "hash":"7824b2f2a263b0bb181ff482a88fb813", //文件hash值
    "name":"diary_mood_icon_alcohol_32", //文件名
    "type":"png" //文件类型
}

我们看到引用的地方require(305)其实是执行了require(161)的registerAsset的方法。查看161的define

__d(/* AssetRegistry */function(global, require, module, exports) {
'use strict';

var assets = [];

function registerAsset(asset) {
  return assets.push(asset);
}

function getAssetByID(assetId) {
  return assets[assetId - 1];
}

module.exports = { registerAsset: registerAsset, getAssetByID: getAssetByID };
}, 161, null, "AssetRegistry");

161对应的就是AssetRegistry, AssetRegistry.registerAsset把图片信息保存在成员数组assets中
查看Image.ios.js的render函数

  render: function() {
     const source = resolveAssetSource(this.props.source) || { uri: undefined, width: undefined, height: undefined };
    ...
    return (
      
    );

通过resolveAssetSource函数

function resolveAssetSource(source: any): ?ResolvedAssetSource {
  if (typeof source === 'object') {
    return source;
  }

  var asset = AssetRegistry.getAssetByID(source);
  if (!asset) {
    return null;
  }

  const resolver = new AssetSourceResolver(getDevServerURL(), getBundleSourcePath(), asset);
  if (_customSourceTransformer) {
    return _customSourceTransformer(resolver);
  }
  
  return resolver.defaultAsset();

调用AssetRegistry.getAssetByID方法取出对应的信息,传递到原生。

//传递到原生的source信息格式
{
    "__packager_asset" = 1;
    height = 16;
    scale = 2;
    uri = "//Users/xxx/Library/Developer/CoreSimulator/Devices/2A0C4BE4-807B-4000-83EB-342B720A14DE/data/Containers/Bundle/Application/F84F1359-CBCD-4184-B3FD-2C7833B83A60/RN472.app/react-app/assets/Images/[email protected]";
    width = 16;
}

iOS原生通过解析uri信息,获取对应的图片

//RCTImageView.m
- (void)setImageSources:(NSArray *)imageSources
{
  if (![imageSources isEqual:_imageSources]) {
    _imageSources = [imageSources copy];
    _needsReload = YES;
  }
}

原理摘自链接
由此可见,原生解析完uri就保存了图片信息,我们可以在setImageSources的地方更改图片信息后重新保存

创建RCTImageView分类

创建RCTImageView分类对setImageSources方法进行hook,检查图片资源是否在目标文档沙盒目录中,如未找到,选择本地同名资源文件替换

@implementation RCTImageView (Bundle)

+ (void)load {
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
      [self swizzleMethod:@selector(bundle_setImageSources:) withMethod:@selector(setImageSources:)];
  });
}

//检查资源文件是否在沙盒目录中,如未找到,选择本地同名资源文件替换
- (void)bundle_setImageSources:(NSArray *)imageSources
{
    NSMutableArray *newImagesources = [[NSMutableArray alloc]init];
    for (RCTImageSource *imageSource in imageSources) {
        NSString *imageUrl = imageSource.request.URL.absoluteString;
        if ([imageUrl hasPrefix:@"http"] || [imageUrl hasPrefix:@"data:image/"]) {//网络素材和base646图片不予处理
            [newImagesources addObject:imageSource];
            continue;
        }
        if ([imageUrl hasPrefix:@"file://"]) {
            imageUrl = [imageUrl substringFromIndex:7];
        }
        imageUrl = [imageUrl stringByURLDecoded];
        if ([[NSFileManager defaultManager] fileExistsAtPath:imageUrl]) {//文件存在直接使用
            [newImagesources addObject:imageSource];
            continue;
        }
        NSRange range = [imageUrl rangeOfString:@"assets/"];
        if (range.length > 0 && range.location > 0) {//若文件不存在,检查是否在应用程序沙盒中存在同名文件
            NSString *releateBundlePath = [imageUrl substringFromIndex:range.location];
            NSString *mainPath = [[NSBundle mainBundle] bundlePath];
            //将文档沙盒路径替换成应用程序沙盒路径获取图片
            NSString *localImageUrl = [mainPath stringByAppendingPathComponent:releateBundlePath];
            //转换成RCTImageSource
            RCTImageSource *newImageSource = [RCTConvert RCTImageSource:@{
                                                                          @"__packager_asset":@1,
                                                                          @"height":@(imageSource.size.height),
                                                                          @"width":@(imageSource.size.width),
                                                                          @"scale":@(imageSource.scale),
                                                                          @"uri":localImageUrl
                                                                          }];
            [newImagesources addObject:newImageSource];
        }
    }
    [self bundle_setImageSources:newImagesources];
}

此方案虽然可行,但是需要对原生代码进行hook,且Android端也同样需要实现,对原生不熟悉的同学不大友好,还有别的方案吗?

最终方案

使用hook的方式对react-native js进行修改,保证了项目与node_modules耦合度降低
实现方式:
(1)通过 hook 的方式重新定义 defaultAsset() 方法。
(2)检查图片资源是否在目标文档沙盒目录中,如未找到,选择本地同名资源文件替换。
核心代码如下:

import { NativeModules } from 'react-native';    
import AssetSourceResolver from "react-native/Libraries/Image/AssetSourceResolver";
import _ from 'lodash';
 
let iOSRelateMainBundlePath = '';
let _sourceCodeScriptURL = '';
 
// ios 平台下获取 jsbundle 默认路径
const defaultMainBundePath = AssetsLoad.DefaultMainBundlePath;
 
function getSourceCodeScriptURL() {
    if (_sourceCodeScriptURL) {
        return _sourceCodeScriptURL;
    }
    // 调用Native module获取 JSbundle 路径
    // RN允许开发者在Native端自定义JS的加载路径,在JS端可以调用SourceCode.scriptURL来获取 
    // 如果开发者未指定JSbundle的路径,则在离线环境下返回asset目录
    let sourceCode =
        global.nativeExtensions && global.nativeExtensions.SourceCode;
    if (!sourceCode) {
        sourceCode = NativeModules && NativeModules.SourceCode;
    }
    _sourceCodeScriptURL = sourceCode.scriptURL;
    return _sourceCodeScriptURL;
}
 
// 获取bundle目录下所有drawable 图片资源路径
let drawablePathInfos = [];
AssetsLoad.searchDrawableFile(getSourceCodeScriptURL(),
     (retArray)=>{
      drawablePathInfos = drawablePathInfos.concat(retArray);
});
// hook defaultAsset方法,自定义图片加载方式
AssetSourceResolver.prototype.defaultAsset = _.wrap(AssetSourceResolver.prototype.defaultAsset, function (func, ...args) {
     if (this.isLoadedFromServer()) {
         return this.assetServerURL();
     }
     if (Platform.OS === 'android') {
         if(this.isLoadedFromFileSystem()) {
             // 获取图片资源路径
             let resolvedAssetSource = this.drawableFolderInBundle();
             let resPath = resolvedAssetSource.uri;
             // 获取JSBundle文件所在目录下的所有drawable文件路径,并判断当前图片路径是否存在
             // 如果存在,直接返回
             if(drawablePathInfos.includes(resPath)) {
                 return resolvedAssetSource;
             }
             // 判断图片资源是否存在本地文件目录
             let isFileExist = AssetsLoad.isFileExist(resPath);
             // 存在直接返回
             if(isFileExist) {
                 return resolvedAssetSource;
             } else {
                 // 不存在,则根据资源 Id 从apk包下的drawable目录加载
                 return this.resourceIdentifierWithoutScale();
             }
         } else {
             // 则根据资源 Id 从apk包下的drawable目录加载
             return this.resourceIdentifierWithoutScale();
         }
 
     } else {
         let iOSAsset = this.scaledAssetURLNearBundle();
         let isFileExist =  AssetsLoad.isFileExist(iOSAsset.uri);
         isFileExist = false;
         if(isFileExist) {
             return iOSAsset;
         } else {
             let oriJsBundleUrl = 'file://'+ defaultMainBundePath +'/' + iOSRelateMainBundlePath;
             iOSAsset.uri = iOSAsset.uri.replace(this.jsbundleUrl, oriJsBundleUrl);
             return iOSAsset;
         }
     }
});

该方案参考链接

你可能感兴趣的:(codepush热更新包减小体积-图片资源优化)