Module Federation原理剖析

【**團隊掘金原文：

為什麼需要學習webpack5 module federation原理呢？因為emp微前端方案正是基於該革命性功能進行的，具有歷史突破意義。通過本文，可以讓你深入學習webpack5 module federation原理，掌握emp微前端方案的底層基石，更好使用和應用emp微前端方案。

最近webpack5正式發布，其中推出了乙個非常令人激動的新功能，即今日的主角——module federation（以下簡稱為mf），下面將通過三個方面（what，how，where）來跟大家一起探索這個功能的奧秘。

module federation中文直譯為「模組聯邦」，而在webpack官方文件中，其實並未給出其真正含義，但給出了使用該功能的motivation，即動機，原文如下

this is often known as micro-frontends, but is not limited to that.

翻譯成中文即

多個獨立的構建可以形成乙個應用程式。這些獨立的構建不會相互依賴，因此可以單獨開發和部署它們。這通常被稱為微前端，但並不僅限於此。

結合以上，不難看出，mf實際想要做的事，便是把多個無相互依賴、單獨部署的應用合併為乙個。通俗點講，即mf提供了能在當前應用中遠端載入其他伺服器上應用的能力。對此，可以引出下面兩個概念：

鑑於mf的能力，我們可以完全實現乙個去中心化的應用部署群：每個應用是單獨部署在各自的伺服器，每個應用都可以引用其他應用，也能被其他應用所引用，即每個應用可以充當host的角色，亦可以作為remote出現，無中心應用的概念。

配置示例：

const htmlwebpackplugin = require("html-webpack-plugin");
const modulefederationplugin = require("webpack/lib/container/modulefederationplugin");
module.exports =,
filename: 'emp.js',
remotes: ,
shared: ["react", "react-dom","react-router-dom"]
})]}

通過以上配置，我們對mf有了乙個初步的認識，即如果要使用mf，需要配置好幾個重要的屬性：

欄位名型別

含義name

string

必傳值，即輸出的模組名，被遠端引用時路徑為 $/$

library

object

宣告全域性變數的方式，name為umd的name

filename

string

構建輸出的檔名

remotes

object

遠端引用的應用名及其別名的對映，使用時以key值作為name

exposes

object

被遠端引用時可暴露的資源路徑及其別名

shared

object

與其他應用之間可以共享的第三方依賴，使你的**中不用重複載入同乙份依賴

讓我們看看構建後的**：

var modulemap =; });
},};var get = function
(module, getscope) )
);__webpack_require__.r =undefined;
return
getscope;
};var init = function
(sharescope, initscope)

可以看到，**中包括三個部分：

再看modulemap，返回對應元件前，先通過__webpack_require__.e載入了其對應的依賴，讓我們看看__webpack_require__.e做了什麼:

__webpack_require__.f ={};
//this file contains only the entry chunk.
//the chunk loading function for additional chunks
__webpack_require__.e = function
(chunkid) , ));
};__webpack_require__.f.consumes = function
(chunkid, promises) 
};try 
else
onfactory(promise);
} catch
(e) 
});}}

通讀核心**之後，可以得到如下總結：

英雄也怕無用武之地，讓我們看看mf的應用場景有哪些：

Module Federation原理剖析

樹鏈剖分原理

border radius幾種寫法的原理剖析

spark大資料 wordcount原理剖析

Module Federation原理剖析

樹鏈剖分原理

border radius幾種寫法的原理剖析

spark大資料 wordcount原理剖析

相關推薦