React Native 资源包拆分实践

资源包拆分背景

React Native 应用默认会将我们的 JS 代码打包成一个文件，当我们的 React Native 应用变得很庞大了以后，一次性下载所有 JS 代码往往耗时很长。这时我们可能会想到可以通过按需加载来进行优化，而按需加载的首要任务就是对代码进行拆分。

通过分析ReactNative页面的JSBundle文件, 可发现一个完整的ReactNative页面代码结构可以分为模块引用、模块定义、模块注册三部分。

• 模块引用：主要是全局模块的定义,
• 模块定义：主要是组件的定义（原生组件、自定义组件）,
• 模块注册：主要是初始化以及入口函数的执行。

拆分方案

metro是 React Native 的官方打包工具，类似于 web 开发常用的打包工具 Webpack。在React Native 0.56版本 之后，metro开放了 --config <path/to/config> 参数，可用于配置自定义的打包过程。本文的metro拆包方案是基于React Native 0.56以后的版本。

借助metro可以进行JS Bundle 拆包：公共基础包和业务包。多个业务共用一个公共基础包，公共基础包可以内置在APP中并进行预加载，用户进入某个业务时，再进行业务包的加载。

JS Bundle 拆包

公共基础包

先建立一个 common.js 文件，在里面引入了所有的基础模块。然后， metro 以这个 common.js 为入口文件，打一个 common.bundle 文件，同时要记录所有的基础模块的 moduleId。

// common.js 示例

require('react');
require('react-native');
// ... 可以继续引入更多的公共基础模块
为了避免 moduleId 重复，目前业内主流的做法是把模块的文件路径当作 moduleId。metro 暴露了 createModuleIdFactory() 这个函数，可以在这个函数里自定义moduleId 的生成逻辑。

// metro.common.config.js

const fs = require('fs');

function getModuleId(path) {
  // 根据文件的相对路径构建 moduleId
  const projectRootPath = __dirname;
  let moduleId = path.substr(projectRootPath.length + 1);
  return moduleId;
}

function createModuleIdFactory() {
    return getModuleId
}

function processModuleFilter(module) {
    const moduleId = getModuleId(module['path'])
    // 把 moduleId 写入 moduleIdList.txt 文件，记录基础模块的moduleId
    fs.appendFileSync('./moduleIdList.txt', `${moduleId}\n`);
    return true
}

module.exports = {
  serializer: {
    createModuleIdFactory,
    processModuleFilter,
  },
};

然后运行命令行命令打包即可：

# 打包平台：android 和 ios
# 打包配置文件：metro.common.config.js
# 打包入口文件：common.js
# 输出路径：bundle/common.android.bundle 和 bundle/common.ios.bundle

npx react-native bundle --platform android --config metro.common.config.js --dev false --entry-file common.js --bundle-output bundle/common.android.bundle

npx react-native bundle --platform ios --config metro.common.config.js --dev false --entry-file common.js --bundle-output bundle/common.ios.bundle

业务包构建

对业务进行打包，metro 的打包入口文件就是业务项目入口文件index.js。

// index.js
class App extends Component {
    render() {
        return (
            <View>
                <Text>
                    hello business
                </Text>
            </View>
        )
    }
}

AppRegistry.registerComponent("business", () => App);

注意要在打包过程中要过滤掉上一步记录的基础模块的moduleId，这样打包结果就只有业务代码了。

metro 提供了 processModuleFilter() 这个方法，借助它可以实现模块的过滤：

// metro.business.config.js

const fs = require('fs');

// 读取 moduleIdList.txt，转换为数组
const moduleIdList = fs.readFileSync('./moduleIdList.txt', 'utf8').toString().split('\n');

function getModuleId(path) {
  // 根据文件的相对路径构建 moduleId
  const projectRootPath = __dirname;
  let moduleId = path.substr(projectRootPath.length + 1);
  return moduleId;
}

function createModuleIdFactory() {
    return getModuleId
}

function processModuleFilter(module) {
    //const modulePath = getProjectPath(module['path'])
    const moduleId = getModuleId(module['path'])
    if (moduleIdList.indexOf(mouduleId) >= 0) {
      // 过滤掉上一步记录的基础模块的moduleId
      return false;
    }
    return true;
}

module.exports = {
  serializer: {
    createModuleIdFactory,
    processModuleFilter,
};

最后运行命令行命令打包即可：

# 打包平台：android 和 ios
# 打包配置文件：metro.business.config.js
# 打包入口文件：index.js
# 输出路径：bundle/business.android.bundle 和 bundle/business.ios.bundle

npx react-native bundle --platform android --config metro.business.config.js --dev false --entry-file index.js --bundle-output bundle/business.android.bundle

npx react-native bundle --platform ios --config metro.business.config.js --dev false --entry-file index.js --bundle-output bundle/business.ios.bundle