Module Federation你的浪漫我來懂

作者：孫舒怡 2021-07-15 06:43:11

開發前端

我們在實際開發中，經歷過許多次的模塊共享的場景。最常見的場景例如我們將代碼封裝后根據版本和環境的不同發布到公共平臺或者私有平臺，供不同項目進行使用，npm 工程化就是其中最日常的實踐。

[[411379]]

本文轉載自微信公眾號「微醫大前端技術」，作者孫舒怡。轉載本文請聯系微醫大前端技術公眾號。

前言

【通關目標: 在頁面中插入輪播圖模塊】

NPM 方式-share lib

將輪播圖代碼打包發布到 NPM 包。主項目中通過 package.json 依賴加載到本地進行編譯打包。【biu~通關成功，當前一星】

當投入生產時，多個項目對于被引入的輪播圖代碼都沒有進行共享，他們是各自獨立的。如果二次封裝的某個模塊進行更改并且要求全部同步……亦或者后期迭代或者定制化需求——

小孫 : “啊!!那豈不是要手動去一一修改?” 代碼爸爸慈祥一笑，看著二傻子痛苦加班。

Module Federation-share subApp

初初查看到一些資料的時候，腦海中浮現一些遠古項目：項目中通過 iframe 引入別的網頁作為一個塊進行展示，當然這也是微前端的一種實現，但是受 postMessage 通信機制、刷新后退、安全問題、SEO、Cookie、速度慢等影響，目前還有許多難以解決的點，一旦復雜度提升，后期迭代就可能需要更多的成本去維護項目或者妥協功能。

Module Federation 的出現使得多部門協作開發變得更便捷。多個單獨的構建形成一個應用程序。這些單獨的構建彼此之間不應該有依賴關系，因此可以單獨開發和部署它們，它們可以隨時被應用，再各自成為新的應用塊。官網對于這塊概念拆解成Low-level concepts和High-level concepts。

讓我們來結合配置項來更詳細了解作者的整個設計過程。

Low-level concepts - 代碼中的分子與原子

PS: 這里的引用不是語法中的引用哦

這里小孫想引用一下化學中的分子與原子的關系。這張圖要側重說明的是本地模塊和遠程模塊。

在圖中每一份 Host 對于它本身來說，都被理解成本地模塊，它是當前應用構建的一部分，對于它本身項目來說，它是分子，是一個容器。但是對于引用它整個項目的 Host 爸爸來說，它整個遠程模塊是原子。

每一份 Romote遠程模塊是原子，它是運行時從容器加載的模塊，是異步行為。當使用遠程模塊時，這些異步操作將放置在遠程模塊和入口點之間的下一個塊加載操作中。如果沒有塊加載操作，就不可能使用遠程模塊。

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) 執行模塊(同步)

加載模塊將在 chunk 加載期間完成。執行模塊將在與其他(本地和遠程)的模塊交錯執行期間完成。

我們來找個例子配合看一下整個設計過程：

一個例子介紹 MF 的常規用法

例子把 App3 的組件引入到 App2 的組件，然后 App1 再引入 App2 的這個二次封裝的組件。這個例子還是非常接近目前常見的開發場景。

/* 業務代碼如下 */ 
 
// 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", 
  }, 
}),

加載模塊相關代碼解析

// from App1 的 remoteEntry.js 中__webpack_modules__某個對象的 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 方法作用：初始化作用域對象 并把依賴存儲到 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 后面有詳細代碼 這邊簡單介紹一下就是一個 JSONP 的下載 
__webpack_require__.I = (name, initScope) => {}) 
 
/* 在消費模塊執行的操作 from consumes   */ 
// 確認好 loaded 以后調用原子的 Scope 
var get = (entry) => { 
  entry.loaded = 1; 
  return entry.get() 
}; 
// 消費模塊再執行原子的異步初始化行為 在這個模塊還會處理后面提到的一個疑問 公共模塊的版本問題 
//__webpack_require__.S[scopeName] 取出 scopeName 對應的 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); 
});

執行 init 初始化以后，收集的依賴存儲到 shareScope 中，并初始化作用域。
中間會涉及到版本號處理，關聯關系，公共模塊等處理，拼數據掛載到__webpack_require__上使用。
調用時通過通過 JSONP 的遠程加載模塊(異步行為)，相關代碼如下：

// 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) => { 
  //...這個方法根據 JSONP 加載遠程腳本  
 }, "app2"); 
}).then(() => (app2)); 
   
// __webpack_require__.l 定義如下 
// 對 IE 和 ES module 單獨處理 如果是 ES module,取 module[default]的值 
// 這邊特別定義 inProgress 去監控多個 url 的回調狀態，這段設計挺有意思的 
__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); 
   }; 
  })();

前面說了單個具象化的加載模塊和執行模塊的代碼，現在說說分子與原子之間的代碼關系，如何知曉并加載原子代碼:

// 每個分子 main.js 中 例如 App1 只引入了 App2 的 
var __webpack_modules__ = ({ 
 "webpack/container/reference/app2":": () 
  .... 
}) 
 
// 如果是有原子代碼的 查看 remotes loading 模塊 
// 執行后找到//localhost:3002/remoteEntry.js 的文件 再異步執行里面的原子代碼 
__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"); 
 
// 然后加載相關 chuck 的時候根據枚舉進行 get 調用  
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 = []; 
      // 獲取渲染時候的 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) => { 
        // 處理錯誤然后給一個標志數據表示錯誤 太長不看 
        data.p = 0; 
      }; 
      var handleFunction = (fn, arg1, arg2, d, next, first) => { 
        // 異步執行方法 太長不看 
      } 
      var onExternal = (external, _, first) => (external ? handleFunction(__webpack_require__.I, data[0], 0, external, onInitialized, first) : onError()); 
      // 核心代碼 本質是調用 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); 
    }); 
  } 
} 
 
// 調用 get 以后 下載下面這個文件再做具象化的處理 
// 在打包后的代碼中 import 相關的原子模塊 異步加載 
(self["webpackChunk_nested_app2"] = self["webpackChunk_nested_app2"] || []).push([["src_bootstrap_js"], { 
 "./src/App.js": "...", 
  "./src/ButtonContainer.js": "...", 
  "./src/bootstrap.js":"..." 
}])

High-level concepts - 雙向共享和推斷

前面說了容器的概念，再深入拓展一個過去常有的場景: 暫不考慮抽離公共邏輯的基礎上，組件 A 和組件 B 都互相需要移植一部分功能，你刷刷刷復制對應代碼過去，后期每次迭代都需要同時更新組件 A 和組件 B 中的對應內容，那如果這個緯度是兩個項目呢?

疑問一：例子中的 import("./bootstrap")作為入口是為什么

看看打包后做了什么：

(self["webpackChunk_nested_app2"] = self["webpackChunk_nested_app2"] || []).push([["src_bootstrap_js"], { 
 "./src/App.js": "...", 
  "./src/ButtonContainer.js": "...", 
  "./src/bootstrap.js":"..." 
}]) 
 
//每個模塊大概處理幾件事 
((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 
    // exports module 
    __webpack_require__.r(__webpack_exports__) 
    // 處理不同 module 類型之間的差異 如果是 ES module 取這個 default 的值 
    __webpack_require__.d(__webpack_exports__, { 
      /* harmony export */ 
      "default": () => (__WEBPACK_DEFAULT_EXPORT__) 
      /* harmony export */ 
    }); 
    //...具體組件邏輯 或者 import 原子部分的代碼~觸發后續的回調鉤子去初始化 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.

文章里寫到在開啟 MF 中共享模塊時，入口采用異步邊界可以有效規避掉雙重更新造成的性能加載問題。官方文檔對此還提供了這種做法的缺陷案例【以下來自官網】：

1.通過 ModuleFederationPlugin 將依賴的 eager 屬性設置為 true：

new ModuleFederationPlugin({ 
    // ...other config 
    shared: { 
        eager: true, 
    } 
});   
// webpack beta.16 升級到 webpack beta.17 可能類似報錯 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' 
  } 
}); 
     
// 此處錯誤可能是丟失了遠程容器，請確保在使用前添加它。 
// 如果已為試圖使用遠程服務器的容器加載了容器，但仍然看到此錯誤，則需將主機容器的遠程容器文件也添加到 HTML 中。

疑問二：包的版本選擇

在我們目前應用到的許多場景中，就對私有庫的自定義組件做過本地的二次封裝，由于代碼是單向更新的，在移植項目的過程中就存在許多難以規避的問題，Module Federation 通過設置singleton: true 開啟公共模塊可以一定程度解決這個問題。但是如果兩方項目所需的版本號不一致是按照什么依據呢?

// 前提情況 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 },  
  }, 
}),

這里小孫簡單寫了個 demo 嘗試模擬這個問題，以basic-host-remote 案例為基礎，自己發布了兩個不同版本的 npm 包，分別引入 v1.0.0 和 v2.0.0 查看一下結果。

可以看到 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" 
}

可以看到此時 App2 還是以低版本展示為主，App1 還是以本地的引用版本為主，開啟共享的差異性并不大。共享中的模塊請求(from 官網中文站):

只在使用時提供
會匹配構建中所有使用的相等模塊請求
將提供所有匹配模塊
將從圖中這個位置的 package.json 提取 requiredVersion
當你有嵌套的 node_modules 時，可以提供和使用多個不同的版本

如何解決? => 自動推斷的設置

packageName 選項允許通過設置包名來查找所需的版本。默認情況下，它會自動推斷模塊請求，當想禁用自動推斷時，請將 requiredVersion 設置為 false。

疑問三：共享模塊是什么程度的共享

借此猜測某些庫是不是也只會一次實例化，實驗繼續 UP!! Npm 中的構造函數邏輯更改如下：初始化成功的例子在 window 下掛載上數據，并且每次初始化后打印值遞增。兩份代碼都更新成 V5.0.0，我們看一下效果：

看似沒有問題對不對，小孫復檢的時候猛然驚醒，這是兩個項目，window 各自為政，這個例子這樣設計本身就是大錯特錯。但是沒關系，雖然小孫不靠譜，但是 webpack 靠譜呀。

main.js 是應用主文件每次都先加載這個。
remoteEntry.js 在 App1 中先加載，是因為 App1 中依賴于 App2 的一些依賴配置，所以 App1 中的 remoteEntry.js 加載優先級非常高，加載以后它可以知道自己需要遠程加載什么資源。
可以看到 App2 加載了 mf-test-ssy, App1 并沒有加載 mf-test-ssy，但是直接加載了 App2 的 remoteEntry，說明 remoteEntry.js 是作為 remote 時被引的文件。
構造函數應該實質上只是初始化了一次，我們從這個結論出發，看一下 webpack 相關的代碼配置，再逐步細化到源碼。

從加載文件到源碼

這里先貼會影響打包的業務代碼：

/* 
** 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 注意這里是編譯后動態生成的。 
*/ 
<script defer src="remoteEntry.js"></script>

把 remoteEntry 打包后的代碼，把相關部分截取出來：

/* webpack/runtime/sharing */ 
//前面暫且忽略一些定義以及判空 
//存放 scope 
__webpack_require__.S = {}; 
var initPromises = {}; 
var initTokens = {}; 
//初始化 scope,最后把數據拼成一個大對象 
__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"; 
  //注冊共享模塊 
  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 }; 
  }; 
  //初始化遠程外部模塊 
  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 = []; 
  //根據 chunkId 的名稱注冊共享模塊 
  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)); 
}; 
})();

這段代碼所做的就是根據配置項將模塊生成內部對應的 modules，定義了一個 scope 去存儲所有的 module，然后注冊了共享模塊等操作。全部掛載在__webpack_require__上，這樣處理以方便后續 require 的方式引入進來。對應最最最核心的源碼：

// 四大天王鎮宅  
sharing: { 
   // 處理分子原子關系的依賴 
  get ConsumeSharedPlugin() { 
   return require("./sharing/ConsumeSharedPlugin"); 
  }, 
    // 處理 provide 依賴 
  get ProvideSharedPlugin() { 
   return require("./sharing/ProvideSharedPlugin"); 
  }, 
    // 我是入口 讓我來調用 并且我實現了共享 
  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(...太長不看); 
  /** @type {Record<string, ConsumesConfig>[]} */ 
    // 定義 Host 消費 remote 的信息 后面會根據這個關聯去加載前面說的原子的初始化以及 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) { 
    // 處理分子原子關系的依賴 
  new ConsumeSharedPlugin({ 
   shareScope: this._shareScope, 
   consumes: this._consumes 
  }).apply(compiler); 
    // 處理 provider 依賴 
  new ProvideSharedPlugin({ 
   shareScope: this._shareScope, 
   provides: this._provides 
  }).apply(compiler); 
 } 
} 
module.exports = SharePlugin;

總結

每一個分子跟原子的愛恨糾葛終有一個文件去劃分好主次，雖然異步加載分離打包，但是愛永不失聯。每一個公共分享的時刻，runtime 在各自心中，就像共同孕育同一個孩子，生了一次不會生第兩次。但是—— 共享模塊中 remote 版本大，按照較大的算，如果 remote 版本小，按照我本地說了算。

其他:MF 生態

ExternalTemplateRemotesPlugin

有需求在構建中使用上下文處理處理動態 Url 的，且需要解決緩存失效問題的，可以看一下這個插件。

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

責任編輯：武曉燕來源：微醫大前端技術

Module Federation 開發場景