资源包拆分背景
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
