Module Federation你的浪漫我來(lái)懂
本文轉(zhuǎn)載自微信公眾號(hào)「微醫(yī)大前端技術(shù)」，作者孫舒怡。轉(zhuǎn)載本文請(qǐng)聯(lián)系微醫(yī)大前端技術(shù)公眾號(hào)。
前言
我們?cè)趯?shí)際開(kāi)發(fā)中，經(jīng)歷過(guò)許多次的模塊共享的場(chǎng)景。最常見(jiàn)的場(chǎng)景例如我們將代碼封裝后根據(jù)版本和環(huán)境的不同發(fā)布到公共平臺(tái)或者私有平臺(tái)，供不同項(xiàng)目進(jìn)行使用，npm 工程化就是其中最日常的實(shí)踐。
【通關(guān)目標(biāo): 在頁(yè)面中插入輪播圖模塊】
NPM 方式-share lib
將輪播圖代碼打包發(fā)布到 NPM 包。主項(xiàng)目中通過(guò) package.json 依賴(lài)加載到本地進(jìn)行編譯打包。 【biu~通關(guān)成功，當(dāng)前一星】
當(dāng)投入生產(chǎn)時(shí)，多個(gè)項(xiàng)目對(duì)于被引入的輪播圖代碼都沒(méi)有進(jìn)行共享，他們是各自獨(dú)立的。如果二次封裝的某個(gè)模塊進(jìn)行更改并且要求全部同步……亦或者后期迭代或者定制化需求——
小孫 : “啊!!那豈不是要手動(dòng)去一一修改?” 代碼爸爸慈祥一笑，看著二傻子痛苦加班。
Module Federation-share subApp
初初查看到一些資料的時(shí)候，腦海中浮現(xiàn)一些遠(yuǎn)古項(xiàng)目：項(xiàng)目中通過(guò) iframe 引入別的網(wǎng)頁(yè)作為一個(gè)塊進(jìn)行展示，當(dāng)然這也是微前端的一種實(shí)現(xiàn)，但是受 postMessage 通信機(jī)制、刷新后退、安全問(wèn)題、SEO、Cookie、速度慢等影響，目前還有許多難以解決的點(diǎn)，一旦復(fù)雜度提升，后期迭代就可能需要更多的成本去維護(hù)項(xiàng)目或者妥協(xié)功能。
Module Federation 的出現(xiàn)使得多部門(mén)協(xié)作開(kāi)發(fā)變得更便捷。多個(gè)單獨(dú)的構(gòu)建形成一個(gè)應(yīng)用程序。這些單獨(dú)的構(gòu)建彼此之間不應(yīng)該有依賴(lài)關(guān)系，因此可以單獨(dú)開(kāi)發(fā)和部署它們，它們可以隨時(shí)被應(yīng)用，再各自成為新的應(yīng)用塊。官網(wǎng)對(duì)于這塊概念拆解成Low-level concepts和High-level concepts。
讓我們來(lái)結(jié)合配置項(xiàng)來(lái)更詳細(xì)了解作者的整個(gè)設(shè)計(jì)過(guò)程。
Low-level concepts - 代碼中的分子與原子
PS: 這里的引用不是語(yǔ)法中的引用哦
這里小孫想引用一下化學(xué)中的分子與原子的關(guān)系。這張圖要側(cè)重說(shuō)明的是本地模塊和遠(yuǎn)程模塊。
在圖中每一份 Host 對(duì)于它本身來(lái)說(shuō)， 都被理解成本地模塊，它是當(dāng)前應(yīng)用構(gòu)建的一部分，對(duì)于它本身項(xiàng)目來(lái)說(shuō)，它是分子，是一個(gè)容器。但是對(duì)于引用它整個(gè)項(xiàng)目的 Host 爸爸來(lái)說(shuō)，它整個(gè)遠(yuǎn)程模塊是原子。
每一份 Romote遠(yuǎn)程模塊是原子，它是運(yùn)行時(shí)從容器加載的模塊，是異步行為。當(dāng)使用遠(yuǎn)程模塊時(shí)，這些異步操作將放置在遠(yuǎn)程模塊和入口點(diǎn)之間的下一個(gè)塊加載操作中。如果沒(méi)有塊加載操作，就不可能使用遠(yuǎn)程模塊。
A container is created through a container entry, which exposes asynchronous access to the specific modules. The exposed access is separated into two steps:
- loading the module (asynchronous) 加載模塊(異步)
- evaluating the module (synchronous) 執(zhí)行模塊(同步)
加載模塊將在 chunk 加載期間完成。執(zhí)行模塊將在與其他(本地和遠(yuǎn)程)的模塊交錯(cuò)執(zhí)行期間完成。
我們來(lái)找個(gè)例子配合看一下整個(gè)設(shè)計(jì)過(guò)程：
一個(gè)例子介紹 MF 的常規(guī)用法
例子把 App3 的組件引入到 App2 的組件，然后 App1 再引入 App2 的這個(gè)二次封裝的組件。這個(gè)例子還是非常接近目前常見(jiàn)的開(kāi)發(fā)場(chǎng)景。
- /* 業(yè)務(wù)代碼如下 */
- // App1 webpack-config
- new ModuleFederationPlugin({
- // ...other config
- name: "app1",
- remotes: {
- app2: `app2@${getRemoteEntryUrl(3002)}`,
- },
- })
- // App2 webpack-config
- new ModuleFederationPlugin({
- // ...other config
- name: "app2",
- filename: "remoteEntry.js",
- exposes: {
- "./ButtonContainer": "./src/ButtonContainer",
- },
- remotes: {
- app3: `app3@${getRemoteEntryUrl(3003)}`,
- },
- })
- // App3 webpack-config
- new ModuleFederationPlugin({
- // ...other config
- name: "app3",
- filename: "remoteEntry.js",
- exposes: {
- "./Button": "./src/Button",
- },
- }),
加載模塊相關(guān)代碼解析
- // from App1 的 remoteEntry.js 中__webpack_modules__某個(gè)對(duì)象的 value
- "webpack/container/entry/app3":((__unused_webpack_module, exports, __webpack_require__) => {
- var moduleMap = {
- "./Button": () => {
- return Promise.all([__webpack_require__.e("webpack_sharing_consume_default_react_react-_0085"), __webpack_require__.e("src_Button_js")]).then(() => (() => ((
- __webpack_require__( /*! ./src/Button */
- "./src/Button.js")))));
- }
- };
- // get 方法作用：獲取 Scope
- var get = (module, getScope) => {
- __webpack_require__.R = getScope;
- getScope = (
- __webpack_require__.o(moduleMap, module) ?
- moduleMap[module]() :
- Promise.resolve().then(() => {
- throw new Error('Module "' + module +'" does not exist in container.');
- })
- );
- __webpack_require__.R = undefined;
- return getScope;
- };
- // init 方法作用：初始化作用域?qū)ο?nbsp;并把依賴(lài)存儲(chǔ)到 shareScope 中
- var init = (shareScope, initScope) => {
- if (!__webpack_require__.S) return;
- var oldScope = __webpack_require__.S["default"];
- var name = "default"
- if (oldScope && oldScope !== shareScope) throw new Error(
- "Container initialization failed as it has already been initialized with a different share scope"
- );
- __webpack_require__.S[name] = shareScope;
- return __webpack_require__.I(name, initScope);
- };
- // This exports getters to disallow modifications
- __webpack_require__.d(exports, {
- get: () => (get),
- init: () => (init)
- });
- })
- // App main.js 后面有詳細(xì)代碼 這邊簡(jiǎn)單介紹一下就是一個(gè) JSONP 的下載
- __webpack_require__.I = (name, initScope) => {})
- /* 在消費(fèi)模塊執(zhí)行的操作 from consumes */
- // 確認(rèn)好 loaded 以后調(diào)用原子的 Scope
- var get = (entry) => {
- entry.loaded = 1;
- return entry.get()
- };
- // 消費(fèi)模塊再執(zhí)行原子的異步初始化行為 在這個(gè)模塊還會(huì)處理后面提到的一個(gè)疑問(wèn) 公共模塊的版本問(wèn)題
- //__webpack_require__.S[scopeName] 取出 scopeName 對(duì)應(yīng)的 scope
- var init = (fn) => (function(scopeName, a, b, c) {
- var promise = __webpack_require__.I(scopeName);
- if (promise && promise.then) return promise.then(fn.bind(fn, scopeName, __webpack_require__.S[scopeName], a, b, c));
- return fn(scopeName, __webpack_require__.S[scopeName], a, b, c);
- });
- 執(zhí)行 init 初始化以后，收集的依賴(lài)存儲(chǔ)到 shareScope 中，并初始化作用域。
- 中間會(huì)涉及到 版本號(hào)處理，關(guān)聯(lián)關(guān)系，公共模塊等處理，拼數(shù)據(jù)掛載到__webpack_require__上使用。
- 調(diào)用時(shí)通過(guò)通過(guò) JSONP 的遠(yuǎn)程加載模塊(異步行為)，相關(guān)代碼如下：
- // from App1 main.js
- /***/ "webpack/container/reference/app2":
- /*!*******************************************************!*\
- !*** external "app2@//localhost:3002/remoteEntry.js" ***!
- \*******************************************************/
- /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
- "use strict";
- var __webpack_error__ = new Error();
- module.exports = new Promise((resolve, reject) => {
- if(typeof app2 !== "undefined") return resolve();
- __webpack_require__.l("//localhost:3002/remoteEntry.js", (event) => {
- //...這個(gè)方法根據(jù) JSONP 加載遠(yuǎn)程腳本
- }, "app2");
- }).then(() => (app2));
- // __webpack_require__.l 定義如下
- // 對(duì) IE 和 ES module 單獨(dú)處理 如果是 ES module,取 module[default]的值
- // 這邊特別定義 inProgress 去監(jiān)控多個(gè) url 的回調(diào)狀態(tài)，這段設(shè)計(jì)挺有意思的
- __webpack_require__.l = (url, done, key, chunkId) => {
- if(inProgress[url]) { inProgress[url].push(done); return; }
- var script, needAttach;
- if(key !== undefined) {
- var scripts = document.getElementsByTagName("script");
- for(var i = 0; i < scripts.length; i++) {
- var s = scripts[i];
- if(s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) { script = s; break; }
- }
- }
- if(!script) {
- needAttach = true;
- script = document.createElement('script');
- script.charset = 'utf-8';
- script.timeout = 120;
- if (__webpack_require__.nc) {
- script.setAttribute("nonce", __webpack_require__.nc);
- }
- script.setAttribute("data-webpack", dataWebpackPrefix + key);
- script.src = url;
- }
- inProgress[url] = [done];
- var onScriptComplete = (prev, event) => {
- // avoid mem leaks in IE.
- script.onerror = script.onload = null;
- clearTimeout(timeout);
- var doneFns = inProgress[url];
- delete inProgress[url];
- script.parentNode && script.parentNode.removeChild(script);
- doneFns && doneFns.forEach((fn) => (fn(event)));
- if(prev) return prev(event);
- }
- ;
- var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
- script.onerror = onScriptComplete.bind(null, script.onerror);
- script.onload = onScriptComplete.bind(null, script.onload);
- needAttach && document.head.appendChild(script);
- };
- })();
前面說(shuō)了單個(gè)具象化的加載模塊和執(zhí)行模塊的代碼，現(xiàn)在說(shuō)說(shuō)分子與原子之間的代碼關(guān)系，如何知曉并加載原子代碼:
- // 每個(gè)分子 main.js 中 例如 App1 只引入了 App2 的
- var __webpack_modules__ = ({
- "webpack/container/reference/app2":": ()
- ....
- })
- // 如果是有原子代碼的 查看 remotes loading 模塊
- // 執(zhí)行后找到//localhost:3002/remoteEntry.js 的文件 再異步執(zhí)行里面的原子代碼
- __webpack_require__.l("//localhost:3002/remoteEntry.js", (event) => {
- if (typeof app2 !== "undefined") return resolve();
- var errorType = event && (event.type === 'load' ? 'missing' :
- event.type);
- var realSrc = event && event.target && event.target.src;
- __webpack_error__.message = 'Loading script failed.\n(' +
- errorType + ': ' + realSrc + ')';
- __webpack_error__.name = 'ScriptExternalLoadError';
- __webpack_error__.type = errorType;
- __webpack_error__.request = realSrc;
- reject(__webpack_error__);
- }, "app2");
- // 然后加載相關(guān) chuck 的時(shí)候根據(jù)枚舉進(jìn)行 get 調(diào)用
- var chunkMapping = {"app2/ButtonContainer": ["webpack/container/remote/app2/ButtonContainer"]};
- var idToExternalAndNameMapping = {
- "webpack/container/remote/app2/ButtonContainer": ["default","./ButtonContainer","webpack/container/reference/app2"]
- };
- __webpack_require__.f.remotes = (chunkId, promises) => {
- if(__webpack_require__.o(chunkMapping, chunkId)) {
- chunkMapping[chunkId].forEach((id) => {
- var getScope = __webpack_require__.R;
- if(!getScope) getScope = [];
- // 獲取渲染時(shí)候的 moduleName
- var data = idToExternalAndNameMapping[id];
- if(getScope.indexOf(data) >= 0) return;
- getScope.push(data);
- if(data.p) return promises.push(data.p);
- var onError = (error) => {
- // 處理錯(cuò)誤然后給一個(gè)標(biāo)志數(shù)據(jù)表示錯(cuò)誤 太長(zhǎng)不看
- data.p = 0;
- };
- var handleFunction = (fn, arg1, arg2, d, next, first) => {
- // 異步執(zhí)行方法 太長(zhǎng)不看
- }
- var onExternal = (external, _, first) => (external ? handleFunction(__webpack_require__.I, data[0], 0, external, onInitialized, first) : onError());
- // 核心代碼 本質(zhì)是調(diào)用 get 方法
- var onInitialized = (_, external, first) => (handleFunction(external.get, data[1], getScope, 0, onFactory, first));
- var onFactory = (factory) => {
- data.p = 1;
- __webpack_modules__[id] = (module) => {
- module.exports = factory();
- }
- };
- handleFunction(__webpack_require__, data[2], 0, 0, onExternal, 1);
- });
- }
- }
- // 調(diào)用 get 以后 下載下面這個(gè)文件再做具象化的處理
- // 在打包后的代碼中 import 相關(guān)的原子模塊 異步加載
- (self["webpackChunk_nested_app2"] = self["webpackChunk_nested_app2"] || []).push([["src_bootstrap_js"], {
- "./src/App.js": "...",
- "./src/ButtonContainer.js": "...",
- "./src/bootstrap.js":"..."
- }])
High-level concepts - 雙向共享和推斷
前面說(shuō)了容器的概念，再深入拓展一個(gè)過(guò)去常有的場(chǎng)景: 暫不考慮抽離公共邏輯的基礎(chǔ)上，組件 A 和組件 B 都互相需要移植一部分功能，你刷刷刷復(fù)制對(duì)應(yīng)代碼過(guò)去，后期每次迭代都需要同時(shí)更新組件 A 和組件 B 中的對(duì)應(yīng)內(nèi)容，那如果這個(gè)緯度是兩個(gè)項(xiàng)目呢?
疑問(wèn)一：例子中的 import("./bootstrap")作為入口是為什么
看看打包后做了什么：
- (self["webpackChunk_nested_app2"] = self["webpackChunk_nested_app2"] || []).push([["src_bootstrap_js"], {
- "./src/App.js": "...",
- "./src/ButtonContainer.js": "...",
- "./src/bootstrap.js":"..."
- }])
- //每個(gè)模塊大概處理幾件事
- ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
- // exports module
- __webpack_require__.r(__webpack_exports__)
- // 處理不同 module 類(lèi)型之間的差異 如果是 ES module 取這個(gè) default 的值
- __webpack_require__.d(__webpack_exports__, {
- /* harmony export */
- "default": () => (__WEBPACK_DEFAULT_EXPORT__)
- /* harmony export */
- });
- //...具體組件邏輯 或者 import 原子部分的代碼~觸發(fā)后續(xù)的回調(diào)鉤子去初始化 scoped
- // 最后掛載
- react_dom__WEBPACK_IMPORTED_MODULE_2___default().render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(
- _App__WEBPACK_IMPORTED_MODULE_0__.default, null), document.getElementById("root"));
- }),
It's still a valid a approach to wrap your entry point with import("./bootstrap"). When doing so, make sure to inline the entry chunk into the HTML for best performance (no double round trip).
This is now the recommended approach. The old "fix" no longer works as remotes could provide shared modules to the app, which requires an async step before using shared modules. Maybe we provide some flag for the entry option in future to do this automatically.
文章里寫(xiě)到在開(kāi)啟 MF 中共享模塊時(shí)，入口采用異步邊界可以有效規(guī)避掉雙重更新造成的性能加載問(wèn)題。官方文檔對(duì)此還提供了這種做法的缺陷案例【以下來(lái)自官網(wǎng)】：
1.通過(guò) ModuleFederationPlugin 將依賴(lài)的 eager 屬性設(shè)置為 true：
- new ModuleFederationPlugin({
- // ...other config
- shared: {
- eager: true,
- }
- });
- // webpack beta.16 升級(jí)到 webpack beta.17 可能類(lèi)似報(bào)錯(cuò) Uncaught Error: Module "./Button" does not exist in container.
2.更改 exposes：Uncaught TypeError: fn is not a function
- new ModuleFederationPlugin({
- exposes: {
- - 'Button': './src/Button'
- + './Button':'./src/Button'
- }
- });
- // 此處錯(cuò)誤可能是丟失了遠(yuǎn)程容器，請(qǐng)確保在使用前添加它。
- // 如果已為試圖使用遠(yuǎn)程服務(wù)器的容器加載了容器，但仍然看到此錯(cuò)誤，則需將主機(jī)容器的遠(yuǎn)程容器文件也添加到 HTML 中。
疑問(wèn)二：包的版本選擇
在我們目前應(yīng)用到的許多場(chǎng)景中，就對(duì)私有庫(kù)的自定義組件做過(guò)本地的二次封裝，由于代碼是單向更新的，在移植項(xiàng)目的過(guò)程中就存在許多難以規(guī)避的問(wèn)題，Module Federation 通過(guò)設(shè)置singleton: true 開(kāi)啟公共模塊可以一定程度解決這個(gè)問(wèn)題。但是如果兩方項(xiàng)目所需的版本號(hào)不一致是按照什么依據(jù)呢?
- // 前提情況 App1 是 host App2 是 remote App1 中引用 App2 的組件
- // App1 package.json:
- "dependencies": {
- "mf-test-ssy": "^1.0.0"
- }
- // App2 package.json:
- "dependencies": {
- "mf-test-ssy": "^2.0.0"
- }
- // webpack-config-common 部分:
- new ModuleFederationPlugin({
- // ...other config
- shared: {
- react: { singleton: true },
- "react-dom": { singleton: true },
- "mf-test-ssy":{ singleton: true },
- },
- }),
這里小孫簡(jiǎn)單寫(xiě)了個(gè) demo 嘗試模擬這個(gè)問(wèn)題，以basic-host-remote 案例為基礎(chǔ)，自己發(fā)布了兩個(gè)不同版本的 npm 包，分別引入 v1.0.0 和 v2.0.0 查看一下結(jié)果。
可以看到 host 展示的 Npm 版本雖然低于 remote 中 Npm 的版本，但是展示的還是 remote 中較高的版本的代碼。
然后互換 App1 和 App2 的 npm 版本：
- // App1 package.json:
- "dependencies": {
- "mf-test-ssy": "^2.0.0"
- }
- // App2 package.json:
- "dependencies": {
- "mf-test-ssy": "^1.0.0"
- }
可以看到此時(shí) App2 還是以低版本展示為主，App1 還是以本地的引用版本為主，開(kāi)啟共享的差異性并不大。 共享中的模塊請(qǐng)求(from 官網(wǎng)中文站):
- 只在使用時(shí)提供
- 會(huì)匹配構(gòu)建中所有使用的相等模塊請(qǐng)求
- 將提供所有匹配模塊
- 將從圖中這個(gè)位置的 package.json 提取 requiredVersion
- 當(dāng)你有嵌套的 node_modules 時(shí)，可以提供和使用多個(gè)不同的版本
如何解決? => 自動(dòng)推斷的設(shè)置
packageName 選項(xiàng)允許通過(guò)設(shè)置包名來(lái)查找所需的版本。默認(rèn)情況下，它會(huì)自動(dòng)推斷模塊請(qǐng)求，當(dāng)想禁用自動(dòng)推斷時(shí)，請(qǐng)將 requiredVersion 設(shè)置為 false。
疑問(wèn)三：共享模塊是什么程度的共享
借此猜測(cè)某些庫(kù)是不是也只會(huì)一次實(shí)例化，實(shí)驗(yàn)繼續(xù) UP!! Npm 中的構(gòu)造函數(shù)邏輯更改如下：初始化成功的例子在 window 下掛載上數(shù)據(jù)，并且每次初始化后打印值遞增。兩份代碼都更新成 V5.0.0，我們看一下效果：
看似沒(méi)有問(wèn)題對(duì)不對(duì)，小孫復(fù)檢的時(shí)候猛然驚醒，這是兩個(gè)項(xiàng)目，window 各自為政，這個(gè)例子這樣設(shè)計(jì)本身就是大錯(cuò)特錯(cuò)。但是沒(méi)關(guān)系，雖然小孫不靠譜，但是 webpack 靠譜呀。
- main.js 是應(yīng)用主文件每次都先加載這個(gè)。
- remoteEntry.js 在 App1 中先加載，是因?yàn)?App1 中依賴(lài)于 App2 的一些依賴(lài)配置，所以 App1 中的 remoteEntry.js 加載優(yōu)先級(jí)非常高，加載以后它可以知道自己需要遠(yuǎn)程加載什么資源。
- 可以看到 App2 加載了 mf-test-ssy, App1 并沒(méi)有加載 mf-test-ssy，但是直接加載了 App2 的 remoteEntry，說(shuō)明 remoteEntry.js 是作為 remote 時(shí)被引的文件。
- 構(gòu)造函數(shù)應(yīng)該實(shí)質(zhì)上只是初始化了一次，我們從這個(gè)結(jié)論出發(fā)，看一下 webpack 相關(guān)的代碼配置，再逐步細(xì)化到源碼。
從加載文件到源碼
這里先貼會(huì)影響打包的業(yè)務(wù)代碼：
- /*
- ** App1 app.js
- */
- import React from "react";
- import Test from "mf-test-ssy"
- // 這里用了 App2 的 button 組件代碼
- const RemoteButton = React.lazy(() => import("app2/Button"));
- const App = () => (
- <div>
- <React.Suspense fallback="Loading Button">
- <RemoteButton />
- </React.Suspense>
- </div>
- );
- export default App;
- /*
- ** App2 Html-Script 注意這里是編譯后動(dòng)態(tài)生成的。
- */
- <script defer src="remoteEntry.js"></script>
把 remoteEntry 打包后的代碼，把 相關(guān)部分截取出來(lái)：
- /* webpack/runtime/sharing */
- //前面暫且忽略一些定義以及判空
- //存放 scope
- __webpack_require__.S = {};
- var initPromises = {};
- var initTokens = {};
- //初始化 scope,最后把數(shù)據(jù)拼成一個(gè)大對(duì)象
- __webpack_require__.I = (name, initScope) => {
- if(!initScope) initScope = [];
- // handling circular init calls
- var initToken = initTokens[name];
- if(!initToken) initToken = initTokens[name] = {};
- if(initScope.indexOf(initToken) >= 0) return;
- initScope.push(initToken);
- // only runs once
- if(initPromises[name]) return initPromises[name];
- // creates a new share scope if needed
- if(!__webpack_require__.o(__webpack_require__.S, name)) __webpack_require__.S[name] = {};
- // runs all init snippets from all modules reachable
- var scope = __webpack_require__.S[name];
- var warn = (msg) => (typeof console !== "undefined" && console.warn && console.warn(msg));
- var uniqueName = "@basic-host-remote/app2";
- //注冊(cè)共享模塊
- var register = (name, version, factory, eager) => {
- var versions = scope[name] = scope[name] || {};
- var activeVersion = versions[version];
- if(!activeVersion || (!activeVersion.loaded && (!eager != !activeVersion.eager ? eager : uniqueName > activeVersion.from))) versions[version] = { get: factory, from: uniqueName, eager: !!eager };
- };
- //初始化遠(yuǎn)程外部模塊
- var initExternal = (id) => {
- var handleError = (err) => (warn("Initialization of sharing external failed: " + err));
- try {
- var module = __webpack_require__(id);
- if(!module) return;
- var initFn = (module) => (module && module.init && module.init(__webpack_require__.S[name], initScope))
- if(module.then) return promises.push(module.then(initFn, handleError));
- var initResult = initFn(module);
- if(initResult && initResult.then) return promises.push(initResult.catch(handleError));
- } catch(err) { handleError(err); }
- }
- var promises = [];
- //根據(jù) chunkId 的名稱(chēng)注冊(cè)共享模塊
- switch(name) {
- case "default": {
- register("mf-test-ssy", "6.0.0", () => (__webpack_require__.e("node_modules_mf-test-ssy_index_js").then(() => (() => (__webpack_require__(/*! ./node_modules/mf-test-ssy/index.js */ "./node_modules/mf-test-ssy/index.js"))))));
- register("react-dom", "16.14.0", () => (Promise.all([__webpack_require__.e("vendors-node_modules_react-dom_index_js"), __webpack_require__.e("webpack_sharing_consume_default_react_react-_76b1")]).then(() => (() => (__webpack_require__(/*! ./node_modules/react-dom/index.js */ "./node_modules/react-dom/index.js"))))));
- register("react", "16.14.0", () => (Promise.all([__webpack_require__.e("vendors-node_modules_react_index_js"), __webpack_require__.e("node_modules_object-assign_index_js-node_modules_prop-types_checkPropTypes_js")]).then(() => (() => (__webpack_require__(/*! ./node_modules/react/index.js */ "./node_modules/react/index.js"))))));
- }
- break;
- }
- if(!promises.length) return initPromises[name] = 1;
- return initPromises[name] = Promise.all(promises).then(() => (initPromises[name] = 1));
- };
- })();
這段代碼所做的就是根據(jù)配置項(xiàng)將模塊生成內(nèi)部對(duì)應(yīng)的 modules，定義了一個(gè) scope 去存儲(chǔ)所有的 module，然后注冊(cè)了共享模塊等操作。全部掛載在__webpack_require__上，這樣處理以方便后續(xù) require 的方式引入進(jìn)來(lái)。對(duì)應(yīng)最最最核心的源碼：
- // 四大天王鎮(zhèn)宅
- sharing: {
- // 處理分子原子關(guān)系的依賴(lài)
- get ConsumeSharedPlugin() {
- return require("./sharing/ConsumeSharedPlugin");
- },
- // 處理 provide 依賴(lài)
- get ProvideSharedPlugin() {
- return require("./sharing/ProvideSharedPlugin");
- },
- // 我是入口 讓我來(lái)調(diào)用 并且我實(shí)現(xiàn)了共享
- get SharePlugin() {
- return require("./sharing/SharePlugin");
- },
- get scope() {
- return require("./container/options").scope;
- }
- },
- // from /webpack-master/lib/sharing/SharePlugin.js
- class SharePlugin {
- /**
- * @param {SharePluginOptions} options options
- */
- constructor(options) {
- /** @type {[string, SharedConfig][]} */
- // 處理 options 格式 模塊二次封裝
- const sharedOptions = parseOptions(...太長(zhǎng)不看);
- /** @type {Record<string, ConsumesConfig>[]} */
- // 定義 Host 消費(fèi) remote 的信息 后面會(huì)根據(jù)這個(gè)關(guān)聯(lián)去加載前面說(shuō)的原子的初始化以及 scoped
- const consumes = sharedOptions.map(([key, options]) => ({
- [key]: {
- import: options.import,
- shareKey: options.shareKey || key,
- shareScope: options.shareScope,
- requiredVersion: options.requiredVersion,
- strictVersion: options.strictVersion,
- singleton: options.singleton,
- packageName: options.packageName,
- eager: options.eager
- }
- }));
- /** @type {Record<string, ProvidesConfig>[]} */
- // 核心代碼 處理
- const provides = sharedOptions
- .filter(([, options]) => options.import !== false)
- .map(([key, options]) => ({
- [options.import || key]: {
- shareKey: options.shareKey || key,
- shareScope: options.shareScope,
- version: options.version,
- eager: options.eager
- }
- }));
- this._shareScope = options.shareScope;
- this._consumes = consumes;
- this._provides = provides;
- }
- /**
- * Apply the plugin
- * @param {Compiler} compiler the compiler instance
- * @returns {void}
- */
- apply(compiler) {
- // 處理分子原子關(guān)系的依賴(lài)
- new ConsumeSharedPlugin({
- shareScope: this._shareScope,
- consumes: this._consumes
- }).apply(compiler);
- // 處理 provider 依賴(lài)
- new ProvideSharedPlugin({
- shareScope: this._shareScope,
- provides: this._provides
- }).apply(compiler);
- }
- }
- module.exports = SharePlugin;
總結(jié)
每一個(gè)分子跟原子的愛(ài)恨糾葛終有一個(gè)文件去劃分好主次，雖然異步加載分離打包，但是愛(ài)永不失聯(lián)。 每一個(gè)公共分享的時(shí)刻，runtime 在各自心中，就像共同孕育同一個(gè)孩子，生了一次不會(huì)生第兩次。 但是—— 共享模塊中 remote 版本大，按照較大的算，如果 remote 版本小，按照我本地說(shuō)了算。
其他:MF 生態(tài)
ExternalTemplateRemotesPlugin
有需求在構(gòu)建中使用上下文處理處理動(dòng)態(tài) Url 的，且需要解決緩存失效問(wèn)題的，可以看一下這個(gè)插件。
from https://github.com/module-federation/module-federation-examples/issues/566
- Dynamic URL, have the ability to define the URL at runtime instead of hard code at build time.
- Cache invalidation.
- // from webpack.config
- plugins: [
- new ModuleFederationPlugin({
- //...config
- remotes: {
- 'my-remote-1': 'my-remote-1@[window.remote-1-domain]/remoteEntry.js?[getRandomString()]',
- },
- }),
- new ExternalTemplateRemotesPlugin(), //no parameter,
- ]
參考資料
https://webpack.js.org/concepts/module-federation/#building-blocks
https://github.com/sokra/slides/blob/master/content/ModuleFederationWebpack5.md
https://www.youtube.com/watch?v=x22F4hSdZJM
https://github.com/module-federation/module-federation-examples
https://segmentfault.com/a/1190000039031505
http://img.iamparadox.club/img/mf2.jpg
https://developer.aliyun.com/article/755252
