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

三、拓展阅读

相关推荐
前端付豪30 分钟前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮30 分钟前
js符号(Symbol)
前端·javascript
用户7678797737321 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
大怪v1 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
遂心_3 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ3 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
小仙女喂得猪4 小时前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
程序员鱼皮4 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort4 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手4 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript