ReactNative进阶(二十八)Metro

文章目录

    • 一、前言
    • 二、Metro生命周期
      • 2.1 解析(Resolution)
      • 2.2 转换(Transformation)
      • 2.3 序列化(Serialization)
    • 三、拓展阅读

一、前言

众所周知,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的配置。

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可以实现模块预加载,而其他的模块按需加载从而提高启动速度。

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

三、拓展阅读

  • Recat Native Metro 官网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/32742.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React Hooks使用规则:为什么不在条件语句和循环中使用它们

React Hooks为函数组件引入了状态和生命周期特性&#xff0c;极大地增强了其功能。然而&#xff0c;正确使用Hooks是确保组件稳定性和性能的关键。本文将探讨React Hooks的基本规则&#xff0c;以及为什么我们不应该在条件语句和循环中使用它们。 Hooks的基本规则 React团队为…

conda环境的备份和移植

备份和移植 Conda 环境可以通过以下步骤实现: 克隆环境 conda create --name backup_myenv --clone myenv# 删除原环境 # conda remove --name myenv --all移植 Conda 环境 方法1:使用 environment.yml 文件移植环境 # 导出环境的依赖项 conda env export --name myenv &g…

HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)(表格布局)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;table布局&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。…

HarmonyOS父子组件传递参数

HarmonyOS父子组件传递参数 1. 使用State和Prop进行父子组件传递———注意是单向同步 Prop装饰器&#xff1a;父子单向同步 注意&#xff1a;只支持单向同步&#xff0c;同时也只能支持string\number\boolean\enum比较简单的类型。 代码 // 使用 props 进行父子组件传值…

Python爬虫介绍

Python 作为一种广泛应用的编程语言&#xff0c;在 Web 开发、大数据开发、人工智能开发和嵌入式开发等领域都有着重要的应用。 Python 的易学性、清晰性和可移植性等特点使它得到很多技术人士的喜爱。对于数据科学和机器学习领域的程序员来说&#xff0c;Python 提供了强大的…

单片机练习题4

一、填空 1. AT89S51单片机任何一个端口要想获得较大的驱动能力&#xff0c;要采用 电平输出。 答&#xff1a;低 2.检测开关处于闭合状态还是打开状态&#xff0c;只需把开关一端接到I/O端口的引脚上&#xff0c;另一端接地&#xff0c;然后通过检测 来…

罗盘时钟lua迷你世界

--罗盘时钟 --星空露珠工作室制作 --作者:韩永旗 --数字换中文 local zhChar {一,二,三,四,五,六,七,八,九} function formatNumber( num ) if type(num)~number then return num..is not a num end if num>99 then return num..不是两位数 end if num0 then return 零 el…

朴素贝叶斯案例

一、朴素贝叶斯算法&#xff1a; 朴素贝叶斯算法&#xff0c;是一种基于贝叶斯定理与特征条件独立假设的分类方法&#xff0c;基于贝叶斯后验概率建立的模型&#xff0c;它用于解决分类问题。朴素&#xff1a;特征条件独立&#xff1b;贝叶斯&#xff1a;基于贝叶斯定理。属于…

【Python】已解决:ModuleNotFoundError: No module named ‘paddle’

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;ModuleNotFoundError: No module named ‘paddle’ 一、分析问题背景 在Python编程中&#xff0c;ModuleNotFoundError是一个常见的错误&#xff0c;它通常发生…

【LC刷题】DAY15:654 617 700 98

【LC刷题】DAY15&#xff1a;654 617 700 98 文章目录 【LC刷题】DAY15&#xff1a;654 617 700 98654. 最大二叉树 [link](https://leetcode.cn/problems/maximum-binary-tree/description/)617. 合并二叉树 [link](https://leetcode.cn/problems/merge-two-binary-trees/desc…

C语言中的进制转换

基础概念 进制又称数制&#xff0c;是指用一组固定的符号和统一的规则来表示数值的方法&#xff0c;在C语言中&#xff0c;可以使用不同的前缀来表示不同的进制&#xff1a; 二进制&#xff1a;以0b或0B为前缀&#xff08;部分编译器可能不支持&#xff09;八进制&#xff1a…

【论文精读】分类扩散模型:重振密度比估计(Revitalizing Density Ratio Estimation)

文章目录 一、文章概览&#xff08;一&#xff09;问题的提出&#xff08;二&#xff09;文章工作 二、理论背景&#xff08;一&#xff09;密度比估计DRE&#xff08;二&#xff09;去噪扩散模型 三、方法&#xff08;一&#xff09;推导分类和去噪之间的关系&#xff08;二&a…

LVGL8.3动画图像(太空人)

LVGL8.3 动画图像 1. 动画图像本质 我们知道电影属于视频&#xff0c;而电影的本质是将一系列动作的静态图像进行快速切换而呈现出动画的形式&#xff0c;也就是说动画本质是一系列照片。所以 lvgl 依照这样的思想而定义了动画图像&#xff0c;所以在 lvgl 中动画图像类似于普…

能理解你的意图的自动化采集工具——AI和爬虫相结合

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…

浅聊Cookie

前言 在客户端使用Nuxt的useFetch调用接口并存储cookie&#xff0c;发现一些趣事~ cookie存储需要遵守同源策略~ 理论我们是知道的&#xff0c;但具体是怎么一回事呢~ 实现 在Nuxt中是这样的~ 直接访问 Nuxt <template><div>{{ data }}</div> </te…

【python】python学生成绩数据分析可视化(源码+数据+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

c#使用自带库对字符串进行AES加密、解密

文章目录 1 代码1.1 定义Aes加密类块1.2 在主函数中调用 2 获取Key和IV2.1 基本方法2.2 自定义Key2.3 技术方面的原理 参考文章&#xff1a; C#软件加密实例&#xff1f; 。 参考官文&#xff1a; Aes 类。 在使用C#的自带的System.Security.Cryptography.Aes模块进行加密和解…

Spdlog日志库的安装配置与源码解析(Linux)

为什么使用日志库而不是控制台输出&#xff1f; 日志库通常提供了更丰富的功能&#xff0c;比如可以设置日志输出级别、输出到不同的目标&#xff08;比如控制台、文件、网络等&#xff09;&#xff0c;以及格式化输出等。 使用日志库可以使代码更易于维护。通过统一的日志接口…

Opencv学习项目2——pytesseract

上一次我们使用pytesseract.image_to_boxes来检测字符&#xff0c;今天我们使用pytesseract.image_to_data来检测文本并显示 实战教程 和上一次一样&#xff0c;添加opencv-python和pytesseract库 首先我们先来了解一下pytesseract.image_to_data pytesseract.image_to_data(…

红队内网攻防渗透:内网渗透之内网对抗:横向移动篇入口切换SMB共享WMI管道DCOM组件Impacket套件CS插件

红队内网攻防渗透 1. 内网横向移动1.1 WMI进行横向移动1.1.1 利用条件:1.1.1 利用详情1.1.1.1 wmic1.1.1.1.1 正向shell上线1.1.1.1.2 反向shell上线1.1.1.2 cscript(不建议使用)1.1.1.3 wmiexec-impacket1.1.1.4 cs插件1.2 SMB横向移动1.2.1 利用条件:1.2.2 利用详情1.2.2…