React Native资源打包和加载机制

1.基础知识

1. react native bundle包生成命令:

react-native bundle --entry-file index.js --bundle-output ./bundle/index.android.jsbundle --platform android --assets-dest ./bundle --dev false

    //entry-file JS文件的路径
    //bundle-output JSbundle文件的生成目录
    //platform 平台 Android或iOS
    //assets-dest 资源文件的生成目录
    //dev 开发模式

2. 资源文件的拷贝生成：
   android:资源文件会被拷贝生成到drawable文件夹下，它的文件路径会变成目录名+下划线的格式来命名原文件。如src/assets/ABCD.png会变成src_assets_ABCD.png。

   
   Android资源文件命名

    iOS:资源文件会被拷贝生成到assets文件夹下，而资源文件则会保存原有的文件路径。如src/assets/ABCD.png bundle之后，会生成为assets/src/assets/ABCD.png 

image.png

3.react native中引用资源的方式：

比如图片组件加载图片或者Web组件加载HTML文件，一般是使用require命令加载对应资源的相对路径。

image.png

2.RN的资源打包机制

rn中打包的脚本代码在react-native/local-cli/bundle这个文件夹中，打包的逻辑代码再buildBundle.js这个文件中。从这个方法入手，一步一步跟踪可以发现。最终依赖的是metro这个Facebook专为RN打包的打包工具(https://github.com/facebook/metro)。(旧版RN代码中是使用的内置的Packager，这里用facebook最新的RN代码和metro代码分析)

image.png

RN中引用的资源文件会被解析成模块依赖，在node-haste（Facebook出的静态资源管理包https://www.npmjs.com/package/node-haste）解析到这些资源后，会转换成资源模块AssetModule。具体步骤如下：

首先通过查找资源匹配来判断是否是资源模块，默认的资源文件后缀在defaults.js文件中。有图片，视频，音频等等文件格式。

image.png

然后通过metro中一系列方法调用，最终调用到Assets文件中的getAssetData方法，生成资源模块。

image.png

现在可以用我们之前打好的jsbundle文件，查看一下打好的资源模块是什么样的：

image.png

3.RN的资源加载机制

以图片资源的加载为例，通过断点可以看出获取资源从最初的require方法为入口，后来是通过AssetRegistry.js这个类，来注册和获取图片资源数据。通过一个数组来维护项目中所使用的本地图片资源。

image.png

//封装的图片资源数据
export type PackagerAsset = {
  +__packager_asset: boolean,
  +fileSystemLocation: string,
  +httpServerLocation: string,
  +width: ?number,
  +height: ?number,
  +scales: Array<number>,
  +hash: string,
  +name: string,
  +type: string,
};

const assets: Array<PackagerAsset> = [];

//注册图片资源
function registerAsset(asset: PackagerAsset): number {
  // `push` returns new array length, so the first asset will
  // get id 1 (not 0) to make the value truthy
  return assets.push(asset);
}

//通过ID获取图片资源
function getAssetByID(assetId: number): PackagerAsset {
  return assets[assetId - 1];
}

图片资源数据中是资源的相对路径，在图片组件中并不是能直接使用的Uri。在这之间有一次资源的解析。查找图片组件的源码Image.ios.js或Image.android.js，发现都通过resolveAssetSouce方法处理了。最终在defaultAsset方法中能清楚的看到图片加载可以分为来自网络，资源或是本地文件系统中。

image.png

function resolveAssetSource(source: any): ?ResolvedAssetSource {
  if (typeof source === 'object') {//加载{uri:XXXX}这种网络资源
    return source;
  }
  const asset = AssetRegistry.getAssetByID(source);//获取资源ID
  if (!asset) {
    return null;
  }
  const resolver = new AssetSourceResolver(
    getDevServerURL(),
    getScriptURL(),
    asset,
  );
  if (_customSourceTransformer) {//自定义资源解析
    return _customSourceTransformer(resolver);
  }
  return resolver.defaultAsset();//默认资源解析方法
}

//AssetSourceResolver.js
class AssetSourceResolver {
  serverUrl: ?string;
  // where the jsbundle is being run from
  jsbundleUrl: ?string;
  // the asset to resolve
  asset: PackagerAsset;

  constructor(serverUrl: ?string, jsbundleUrl: ?string, asset: PackagerAsset) {
    this.serverUrl = serverUrl;
    this.jsbundleUrl = jsbundleUrl;
    this.asset = asset;
  }

  isLoadedFromServer(): boolean {
    return !!this.serverUrl;
  }

  isLoadedFromFileSystem(): boolean {
    return !!(this.jsbundleUrl && this.jsbundleUrl.startsWith('file://'));
  }

  defaultAsset(): ResolvedAssetSource {
    if (this.isLoadedFromServer()) {//加载来自网络的资源，jsbundle资源来自网络，例如debug模式
      return this.assetServerURL();
    }

    if (Platform.OS === 'android') {
      return this.isLoadedFromFileSystem()//加载来自文件系统的资源
        ? this.drawableFolderInBundle()
        : this.resourceIdentifierWithoutScale();//加载来自Asset资源中的文件
    } else {
      return this.scaledAssetURLNearBundle();
    }
  }