<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
隨著業務的發展,每一個 React Native 應用的程式碼數量都在不斷增加,bundle 體積不斷膨脹,對應用效能的負面影響愈發明顯。雖然我們可以通過 React Native 官方工具 Metro 進行拆包處理,拆分為一個基礎包和一個業務包進行一定程度上的優化,但對日益增長的業務程式碼也無能為力,我們迫切地需要一套方案來減小我們 React Native 應用的體積。
第一個想到的就是拆分多業務包,既然拆分為一個業務包不夠,那我多拆為幾個業務包不就可以了。當一個 React Native 應用拆分為多個業務包之後其實就相當於拆分為多個應用了,只不過程式碼在同一倉庫裡。這雖然可以解決單個應用不斷膨脹的問題,但是有不少侷限性。接下來一一分析:
作為一個前端想到的另一方案自然就是動態匯入(Dynamic import)了,基於其動態特性對於多業務包的眾多缺點,此方案都可避免。此外擁有了動態匯入我們就可以實現頁面按需載入,元件懶載入等等能力。但是 Metro 官方並不支援動態匯入,因此需要對 Metro 進行深度客製化,這也是本文即將介紹的在 React Native 中實現動態匯入。
在介紹具體方案之前我們先看下 Metro 的打包機制及其構建產物。
如下圖所示Metro打包會經過三個階段,分別是 Resolution、Transformation、Serialization。
image
Resolution 的作用是從入口開始構建依賴圖;Transformation 是和 Resolution 階段同時執行的,其目的是將所有 module(一個模組就是一個 module ) 轉換為目標平臺可識別語言,這裡面既有高階 JavaCript 語法的轉換(依賴 BaBel),也有對特定平臺,比如安卓的特殊 polyfills。這兩個階段主要是生產中間產物 IR 為最後一階段所消費。
Serialization 則是將所有 module 組合起來生成 bundle,這裡需要特別注意 Metro API 檔案中 Serializer Options 中的兩個設定:
createModuleIdFactory
, type 為 () => (path: string) => number
。 這個函數為每個 module 生成一個唯一的 moduleId,預設情況下是自增的數位。所有的依賴關係都依仗此 moduleId。processModuleFilter
, type 為 (module: Array) => boolean
。這個函數用來過濾模組,決定是否打入 bundle。一個 React Native 典型的 bundle 從上到下可以分為三個部分:
DEV
;以及通過 IIFE 宣告的一些重要全域性函數,如: __d
、 __r
等;__d
開頭,業務程式碼全部在這一塊;__r(react-native/Libraries/Core/InitializeCore.js moduleId)
和 __r(${入口 moduleId})
。function define(factory, moduleId, dependencyMap) { const mod = { dependencyMap, factory, hasError: false, importedAll: EMPTY, importedDefault: EMPTY, isInitialized: false, publicModule: { exports: {} } }; modules[moduleId] = mod; }
__d
其實就是 define
函數,可以看到其實現很簡單,做的就是宣告一個 mode
,同時 moduleId
與 mode
做了一層對映,這樣通過 moduleId
就可以拿到 module 實現。我們看下 __d
如何使用:
__d(function (global, _$$_REQUIRE, _$$_IMPORT_DEFAULT, _$$_IMPORT_ALL, module, exports, _dependencyMap) { var _reactNative = _$$_REQUIRE(_dependencyMap[0], "react-native"); var _reactNavigation = _$$_REQUIRE(_dependencyMap[1], "react-navigation"); var _reactNavigationStack = _$$_REQUIRE(_dependencyMap[2], "react-navigation-stack"); var _routes = _$$_REQUIRE(_dependencyMap[3], "./src/routes"); var _appJson = _$$_REQUIRE(_dependencyMap[4], "./appJson.json"); var AppNavigator = (0, _reactNavigationStack.createStackNavigator)(_routes.RouteConfig, (0, _routes.InitConfig)()); var AppContiner = (0, _reactNavigation.createAppContainer)(AppNavigator); _reactNative.AppRegistry.registerComponent(_appJson.name, function () { return AppContiner; }); }, 0, [1, 552, 636, 664, 698], "index.android.js");
這是 __d
的唯一用處,定義一個 module。這裡解釋下入參,第一個是個函數,就是 module 的工廠函數,所有的業務邏輯都在這裡面,其是在 __r
之後呼叫的;第二個是 moduleId,模組的唯一標識;第三部分是其依賴的模組的 moduleId;第四個是此模組的檔名稱。
function metroRequire(moduleId) { ... const moduleIdReallyIsNumber = moduleId; const module = modules[moduleIdReallyIsNumber]; return module && module.isInitialized ? module.publicModule.exports : guardedLoadModule(moduleIdReallyIsNumber, module); } function guardedLoadModule(moduleId, module) { ... return loadModuleImplementation(moduleId, module); } function loadModuleImplementation(moduleId, module) { ... const moduleObject = module.publicModule; moduleObject.id = moduleId; factory( global, metroRequire, metroImportDefault, metroImportAll, moduleObject, moduleObject.exports, dependencyMap ); return moduleObject.exports; ... }
__r
其實就是 require
函數。如上精簡後的程式碼所示,require
方法首先判斷所要載入的模組是否已經存在並初始化完成,若是則直接返回模組,否則呼叫 guardedLoadModule
方法,最終呼叫的是 loadModuleImplementation
方法。loadModuleImplementation
方法獲得模組定義時傳入的 factory
方法並呼叫,最後返回。
基於以上對 Metro 工作原理及其產物 bundle 的分析,我們可以大致得出這樣一個結論:React Native 啟動時,JS 測(即 bundle)會先初始化一些變數,接著通過 IIFE 宣告核心方法 define
和 require
;接著通過 define
方法定義所有的模組,各個模組的依賴關係通moduleId
維繫,維繫的紐帶就是 require
;最後通過 require
應用的註冊方法實現啟動。
實現動態匯入自然需要將目前的 bundle 進行重新拆分和組合,整個方案的關鍵點在於:分和合,分就是 bundle 如何拆分,什麼樣的 module 需要拆分出去,什麼時候進行拆分,拆分之後的 bundle 儲存在哪裡(涉及到後續如何獲取);合就是拆出去的 bundle 如何獲取,並在獲取之後仍在正確的上下文內執行。
前面有說過 Metro 工作的三個階段,其中之一就是 Resolution,這一階段的主要任務是從入口開始構建整個應用依賴圖,這裡為了方便示意以樹來代替。
image
如上所示就是一個依賴樹,正常情況下會打出一個 bundle,包含模組 A、B、C、D、E、F、G。現在我想對模組 B 和 F 做動態匯入。怎麼做呢第一步當然是標識,既然叫動態匯入自然而然的想到了 JavaScript 語法上的動態匯入。
只需要將 import A from '.A'
改成 const A = import('A')
即可,這就需要引入 Babel 外掛()了,事實上官方 Metro 相關設定包 metro-config 已經整合了此外掛。官方做的不僅僅於此,在 Transformation 階段還對採用動態匯入的 module 增加了唯一標識 Async = true
。
此外在最終產物 bundle 上 Metro 提供了一個名叫 AsyncRequire.js 的檔案模版來做動態匯入的語法的 polyfill,具體實現如下
const dynamicRequire = require; module.exports = function(moduleID) { return Promise.resolve().then(() => dynamicRequire.importAll(moduleID)); };
總結一下 Metro 預設會如何處理動態匯入:在 Transformation 通過 Babel 外掛處理動態匯入語法,並在中間產物上增加標識 Async
,在 Serialization 階段用 Asyncrequire.js 作為模板替換動態匯入的語法,即
const A = import(A); //變為 const A = function(moduleID) { return Promise.resolve().then(() => dynamicRequire.importAll(moduleID)); };
Asyncrequire.js 不僅關乎我們如何拆分,還和我們最後的合息息相關,留待後續再談。
通過上文我們知道構建過程中會生成一顆依賴樹,並對其中使用動態的匯入的模組做了標識,接下來就是樹如何進行拆分了。對於樹的通用處理辦法就是 DFS,通過對上圖依賴樹做 DFS 分析之後可以得到如下做了拆分的樹,包含一顆主樹和兩顆非同步樹。對於每棵樹的依賴進行收集即可得到如下三組 module 集合:A、E、C;B、D、E、G;F、G。
image
當然在實際場景中,各個模組的依賴遠比這個複雜,甚至存在迴圈依賴的情況,在做 DFS 的過程中需要遵循兩個原則:
通過這三組 module 集合即可得到三個bundle(我們將主樹生成的 bundle 稱為主 bundle;非同步樹生成的稱為非同步 bundle)。至於如何生成,直接藉助前文提到的 Metro 中 processBasicModuleFilter 方法即可。Metro 原本在一次構建過程中,只會經過一次 Serialization 階段生成一個 bundle。現在我們需要對每一組 module 都進行一次 bundle 生成。
這裡需要注意幾個問題:
image
至此我們已經獲得了主 bundle 和非同步 bundle,大致結構如下:
/* 主 bundle */ // moduleId 與 路徑對映 var REMOTE_SOURCE_MAP = {${id}: ${path}, ... } // IIFE __r 之類定義 (function (global) { "use strict"; global.__r = metroRequire; global.__d = define; global.__c = clear; global.__registerSegment = registerSegment; ... })(typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : this); // 業務模組 __d(function (global, _$$_REQUIRE, _$$_IMPORT_DEFAULT, _$$_IMPORT_ALL, module, exports, _dependencyMap) { var _reactNative = _$$_REQUIRE(_dependencyMap[0], "react-native"); var _asyncModule = _$$_REQUIRE(_dependencyMap[4], "metro/src/lib/bundle-modules/asyncRequire")(_dependencyMap[5], "./asyncModule") ... },0,[1,550,590,673,701,855],"index.ios.js"); ... // 應用啟動 __r(91); __r(0); /* 非同步 bundle */ // 業務模組 __d(function (global, _$$_REQUIRE, _$$_IMPORT_DEFAULT, _$$_IMPORT_ALL, module, exports, _dependencyMap) { var _reactNative = _$$_REQUIRE(_dependencyMap[0], "react-native"); ... },855,[956, 1126],"asyncModule.js");
大部分工作其實在分這一階段已經做完了,接下來就是如何合了,前面有提到過動態匯入的語法在生成的 bundle 中會被 AsyncRequire.js 中的模板所替代。仔細研究下其程式碼發現其是用 Promise
包裹了一層 require(moduleId)
來實現。
現在我們直接 require(moduleId)
必然是拿不到真正的 module 實現了,因為非同步 bundle 還沒有獲取到,module 還沒有定義。但可以對 AsyncRequire.js 做如下改造
const dynamicRequire = require; module.exports = function (moduleID) { return fetch(REMOTE_SOURCE_MAP[moduleID]).then(res => { // 行1 new Function(res)(); // 行2 return dynamicRequire.importAll(moduleID) // 行3 }); };
接下來一行行進行分析
REMOTE_SOURCE_MAP
是在生成階段寫入主 bundle 的 moduleId 與非同步 bundle 資源地址的對映。fetch
根據非同步 bundle 的儲存方式的不同選擇不同的方式獲取真正的程式碼資源;至此我們就完成了 React Native 動態匯入的改造。相對於多業務包,因為其動態特性使得業務方使用的時候所有修改都在同一個 React Native 應用內部閉環完成,外部無感知,多業務包的眾多缺陷也就不存在了。與此同時構建時會充分利用第一次的生產的 IR,這樣每一個 bundle 不需要再單獨走 Metro 的完整構建流程。
當然有一點是必須需要考慮的,那就是我們對 Metro 進行改造之後,對於後續的升級是否有影響,導致只能鎖定 React Native 和 Metro 版本。這個其實完全不用擔心,從前面的分析可以知道,我們對於整個流程的改造可以分為兩部分:構建時、執行時。在構建時我們確實新增了不少能力,比如新的分組演演算法、程式碼生成;但是執行時則是完全基於現有版本能力的增強。這就使得動態匯入的執行時無相容性問題,即使升級到新版本依然不會報錯,只不過再我們再次改造構建時之前失去了動態匯入的能力。
最後真正在生產環境上使用還有一些工程上的改造,比如:構建平臺適配、提供快速接入元件等等限於篇幅就不在此詳述了。
到此這篇關於React Native中實現動態匯入的範例程式碼的文章就介紹到這了,更多相關React Native動態匯入內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45