一、前言

眾所周知，Metro 是 React Native 默認的 JavaScript 打包模塊。對于前端項目，打包工具已有webpack(大而全，圖片代碼打包)，rollup(專攻代碼打包,框架場景常見)等，既然有這些打包工具為什么還要在移動端搞一個metro，其中一個原因為ram bundle，iOS采用indexed ram bundle讀取一個文件效率更高，Android采用file ram bundle。

二、Metro生命周期

metro的bundling有三個階段：

• 解析(Resolution): 解析所有模塊并且構建成圖，有點類似于Gradle在配置階段會將所有相互依賴的任務構建成圖。
• 轉(zhuǎn)換(Transformation)：轉(zhuǎn)換階段會將模塊轉(zhuǎn)換成目標平臺能識別的格式，這一階段執(zhí)行了js編譯，主流常用的js編譯器為babel。
• 序列化(Serialization)：最后一個階段序列化，會將所有轉(zhuǎn)換之后的模塊打包成一個或者多個bundle。

2.1 解析(Resolution)

在Gradle 配置階段我們?？吹?code>assets、aidl、res、java的配置。

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與之對應項為assetExts、sourceExts。

2.2 轉(zhuǎn)換(Transformation)

在ram bundle的啟動優(yōu)化中，通過getTransformOptions可以實現(xiàn)模塊預加載，而其他的模塊按需加載從而提高啟動速度。

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 multidex，Android5.0之前可以將部分類指明到主dex，其他被分配到輔dex。在Android App的構建流程中，編譯完之后還會對字節(jié)碼進行混淆，這塊metro也有minifierPath(默認使用metro-minify-terser)、minifierConfig。在混淆這塊除了terser，metro還提供了metro-minify-uglify。

2.3 序列化(Serialization)

在序列化的階段模塊需要有id以便于require導入，創(chuàng)建模塊id的函數(shù)為createModuleIdFactory，而processModuleFilter決定了過濾掉哪些模塊不進入bundle，所以通過createModuleIdFactory與processModuleFilter兩個函數(shù)可以實現(xiàn)分包。

隨著react-refresh、react-reconciler相繼出現(xiàn)，react hot loader逐漸被替代，react refresh的實現(xiàn)與平臺無關，React 、React Native等實現(xiàn)react-reconciler的自定義渲染器都能使用，而且react refresh能hot的顆粒度更小。在Web平臺使用react refresh 。移動平臺則是React Native團隊自己實現(xiàn)且內(nèi)置到了metro打包器取名fast-refresh。

三、拓展閱讀

• Recat Native Metro 官網(wǎng)