RN JSBundle 拆分解决方案（2）: JSBundle 、Metro 结构分析

 

在第一篇（RN JSBundle 拆分解决方案（1）: 应用启动、视图加载原理解析）中我们对RN的启动、视图加载流程从源码角度做了简单的梳理。本篇内容我们继续对JSBundle 文件内容结构，以及当前RN框架默认的打包工具 Metro 进行分析。

JSBundle 文件结构

当我们执行 react-native bundle | unbundle 命令时，RN框架会按照当前给定的参数，打包出特定平台下的 bundle 文件。在React Native 实现热部署、差异化增量热更新文章中，对于打包做了比较详细的介绍，例如执行如下打包命令：

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

上述命令是以 index.js 文件为入口，打出 Android 平台下的bundle文件，将bundle文件和资源数据写入到 bundle 目录下，并关闭开发模式。在源码分析一节中，我们知道开发模式关系到了bundle的加载方式。0.5x 版本下，RN框架借助 Metro-Bundler 完成对bundle文件的打包流程。其实当我们执行 npm start 开启本地服务，并运行程序时，就可以发现 Metro-Bundler 已经执行并开始从本地 Server 加载 bundle文件了：