ReactNative进阶(二十八)Metro

文章目录

一、前言

众所周知,MetroReact Native 默认的 JavaScript 打包模块。对于前端项目,打包工具已有webpack(大而全,图片代码打包),rollup(专攻代码打包,框架场景常见)等,既然有这些打包工具为什么还要在移动端搞一个metro,其中一个原因为ram bundle,iOS采用indexed ram bundle读取一个文件效率更高,Android采用file ram bundle

二、Metro生命周期

metrobundling有三个阶段:

  • 解析 (Resolution): 解析所有模块并且构建成图,有点类似于Gradle在配置阶段会将所有相互依赖的任务构建成图。
  • 转换 (Transformation):转换阶段会将模块转换成目标平台能识别的格式,这一阶段执行了js编译,主流常用的js编译器为babel
  • 序列化 (Serialization):最后一个阶段序列化,会将所有转换之后的模块打包成一个或者多个bundle

2.1 解析(Resolution)

在Gradle 配置阶段我们常看到assetsaidlresjava的配置。

javascript 复制代码
android{
    ...
    sourceSets {
        main {
            java.excludes = [
                    '**/build/**',
            ]
            srcDirs.forEach {
                assets.srcDirs += "$projectDir/$it/main/assets"
                aidl.srcDirs += "$projectDir/$it/main/aidl"
                res.srcDirs += "$projectDir/$it/main/res-frame-animation"
                res.srcDirs += "$projectDir/$it/main/res"
                java.srcDirs += "$projectDir/$it/main/java"
            }
        }
    }
    ...
}

metro与之对应项为assetExtssourceExts

2.2 转换(Transformation)

ram bundle的启动优化中,通过getTransformOptions可以实现模块预加载,而其他的模块按需加载从而提高启动速度。

javascript 复制代码
function getTransformOptions(
  entryPoints: $ReadOnlyArray<string>,
  options: {
    dev: boolean,
    hot: boolean,
    platform: ?string,
  },
  getDependenciesOf: (path: string) => Promise<Array<string>>,
): Promise<ExtraTransformOptions> {
  // ...
}

type ExtraTransformOptions = {
  preloadedModules?: {[path: string]: true} | false,
  ramGroups?: Array<string>,
  transform?: {
    inlineRequires?: {blockList: {[string]: true}} | boolean,
    nonInlinedRequires?: $ReadOnlyArray<string>,
  },
};

preloadedModules中配置的模块为预加载模块,而其他的模块在ram bundle按需加载,这一块有点类似于Android multidexAndroid5.0之前可以将部分类指明到主dex,其他被分配到辅dex。在Android App的构建流程中,编译完之后还会对字节码进行混淆,这块metro也有minifierPath(默认使用metro-minify-terser)、minifierConfig。在混淆这块除了terser,metro还提供了metro-minify-uglify

2.3 序列化(Serialization)

在序列化的阶段模块需要有id以便于require导入,创建模块id的函数为createModuleIdFactory,而processModuleFilter决定了过滤掉哪些模块不进入bundle,所以通过createModuleIdFactoryprocessModuleFilter两个函数可以实现分包。

随着react-refreshreact-reconciler相继出现,react hot loader逐渐被替代,react refresh的实现与平台无关,ReactReact Native等实现react-reconciler的自定义渲染器都能使用,而且react refresh能hot的颗粒度更小。在Web平台使用react refresh 。移动平台则是React Native团队自己实现且内置到了metro打包器取名fast-refresh

三、拓展阅读

相关推荐
非凡ghost3 分钟前
TeamViewer 手机版:一键远程控制,深度管理,提升多设备管理效率
前端·javascript·后端
狮子座的男孩7 分钟前
js基础:06、函数(创建函数、参数、返回值、return、立即执行函数、对象(函数))和枚举对象的属性
开发语言·前端·javascript·经验分享·函数·枚举对象·立即执行函数
一枚前端小能手20 分钟前
🔄 重学Vue之依赖注入(provide、inject)
前端·javascript·vue.js
Mintopia38 分钟前
🧩 未成年人保护视角:WebAIGC内容的分级过滤技术
前端·javascript·aigc
Mintopia1 小时前
🌌 Three.js 几何变化动画配合噪声粒子教程:让你的代码也会“呼吸”
前端·javascript·three.js
kkkkk0211061 小时前
JavaScript性能优化实战:深度剖析瓶颈与高效解决方案
开发语言·javascript·性能优化
吃饺子不吃馅1 小时前
项目上localStorage太杂乱,逼我写了一个可视化浏览器插件
前端·javascript·chrome
.生产的驴1 小时前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
艾小码2 小时前
ES6+革命:8大特性让你的JavaScript代码质量翻倍
前端·javascript
两个西柚呀2 小时前
Vue组件的一些底层细节
前端·javascript·vue.js