友匯網(wǎng) 做公司網(wǎng)站如何利用網(wǎng)絡進行推廣和宣傳
文章目錄
- 一、前言
- 二、Metro生命周期
- 2.1 解析(Resolution)
- 2.2 轉(zhuǎn)換(Transformation)
- 2.3 序列化(Serialization)
- 三、拓展閱讀
一、前言
眾所周知,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)