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

三、拓展阅读

相关推荐
软件技术NINI5 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
歪歪10017 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手19 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
lapiii35835 分钟前
快速学完React计划(第一天)
前端·react.js·前端框架
liangshanbo121535 分钟前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript
苏打水com37 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手1 小时前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
tianchang1 小时前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
JNU freshman2 小时前
vue 技巧与易错
前端·javascript·vue.js
Asort2 小时前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式