免费网站怎么申请,广州地铁封闭最新消息,做网站推广引流效果好吗,网站开发一个月文章目录 一、前言二、Metro生命周期2.1 解析(Resolution)2.2 转换(Transformation)2.3 序列化(Serialization) 三、拓展阅读 一、前言
众所周知#xff0c;Metro 是 React Native 默认的 JavaScript 打包模块。对于前端项目#xff0c;打包工具已有webpack(大而全#xff… 文章目录 一、前言二、Metro生命周期2.1 解析(Resolution)2.2 转换(Transformation)2.3 序列化(Serialization) 三、拓展阅读 一、前言
众所周知Metro 是 React Native 默认的 JavaScript 打包模块。对于前端项目打包工具已有webpack(大而全图片代码打包)rollup(专攻代码打包,框架场景常见)等既然有这些打包工具为什么还要在移动端搞一个metro其中一个原因为ram bundleiOS采用indexed ram bundle读取一个文件效率更高Android采用file ram bundle。
二、Metro生命周期
metro的bundling有三个阶段
解析(Resolution): 解析所有模块并且构建成图有点类似于Gradle在配置阶段会将所有相互依赖的任务构建成图。转换(Transformation)转换阶段会将模块转换成目标平台能识别的格式这一阶段执行了js编译主流常用的js编译器为babel。序列化(Serialization)最后一个阶段序列化会将所有转换之后的模块打包成一个或者多个bundle。
2.1 解析(Resolution)
在Gradle 配置阶段我们常看到assets、aidl、res、java的配置。
android{...sourceSets {main {java.excludes [**/build/**,]srcDirs.forEach {assets.srcDirs $projectDir/$it/main/assetsaidl.srcDirs $projectDir/$it/main/aidlres.srcDirs $projectDir/$it/main/res-frame-animationres.srcDirs $projectDir/$it/main/resjava.srcDirs $projectDir/$it/main/java}}}...
}metro与之对应项为assetExts、sourceExts。
2.2 转换(Transformation)
在ram bundle的启动优化中通过getTransformOptions可以实现模块预加载而其他的模块按需加载从而提高启动速度。
function getTransformOptions(entryPoints: $ReadOnlyArraystring,options: {dev: boolean,hot: boolean,platform: ?string,},getDependenciesOf: (path: string) PromiseArraystring,
): PromiseExtraTransformOptions {// ...
}type ExtraTransformOptions {preloadedModules?: {[path: string]: true} | false,ramGroups?: Arraystring,transform?: {inlineRequires?: {blockList: {[string]: true}} | boolean,nonInlinedRequires?: $ReadOnlyArraystring,},
};在preloadedModules中配置的模块为预加载模块而其他的模块在ram bundle按需加载这一块有点类似于Android multidexAndroid5.0之前可以将部分类指明到主dex其他被分配到辅dex。在Android App的构建流程中编译完之后还会对字节码进行混淆这块metro也有minifierPath(默认使用metro-minify-terser)、minifierConfig。在混淆这块除了tersermetro还提供了metro-minify-uglify。
2.3 序列化(Serialization)
在序列化的阶段模块需要有id以便于require导入创建模块id的函数为createModuleIdFactory而processModuleFilter决定了过滤掉哪些模块不进入bundle所以通过createModuleIdFactory与processModuleFilter两个函数可以实现分包。
随着react-refresh、react-reconciler相继出现react hot loader逐渐被替代react refresh的实现与平台无关React 、React Native等实现react-reconciler的自定义渲染器都能使用而且react refresh能hot的颗粒度更小。在Web平台使用react refresh 。移动平台则是React Native团队自己实现且内置到了metro打包器取名fast-refresh。
三、拓展阅读
Recat Native Metro 官网
