场景
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 (
<RCTImageView
{...this.props}
style={style}
resizeMode={resizeMode}
tintColor={tintColor}
source={sources}
/>
);
通过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/diary_mood_icon_alcohol_32@2x.png";
width = 16;
}
iOS原生通过解析uri信息，获取对应的图片
//RCTImageView.m
- (void)setImageSources:(NSArray<RCTImageSource *> *)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<RCTImageSource *> *)imageSources
{
NSMutableArray<RCTImageSource *> *newImagesources = [[NSMutableArray<RCTImageSource *> 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;
}
}
});
该方案参考链接
