Webpack 5 的音讯只管曾经进去了许久，然而正式版始终还未公布。Webpack 5 的 ChangeLog 中，除了惯例的性能优化、编译提速之外，有一个比拟让人期待的性能就是 Module Federation。Module Federation 能够强行翻译成「模块联邦」，然而听起来很是怪异，我在某个前端群也抛出了这个问题，没想到大家的回复也是形形色色。所以，本文就间接用 Module Federation 了，不进行翻译听起来如同更难受一点。
什么是 Module Federation ？
Module Federation 次要是用来解决多个利用之间代码共享的问题，能够让咱们的更加优雅的实现跨利用的代码共享。假如咱们当初有两个我的项目A、B，我的项目 A 外部有个轮播图组件，我的项目 B 外部有个新闻列表组件。
当初来了个需要，要将我的项目 B 的新闻列表移植到我的项目 A 中，而且须要保障后续的迭代过程中，两边的新闻列表款式保持一致。这时候你有两种做法：
- 应用 CV 大法，将我的项目 B 的代码残缺复制一份到我的项目 A；
- 将新闻组件独立，公布到外部的 npm，通过 npm 加载组件；
CV 大法必定比独立组件要快，毕竟不须要将组件代码从我的项目 B 独立进去，而后公布 npm。然而 CV 大法的缺点是，不能及时同步代码，如果你的另一个共事在你复制代码之后，对我的项目 B 的新闻组件进行了批改，此时我的项目 A 与我的项目 B 的新闻组件就不统一了。
这个时候，如果你两个我的项目恰好应用了 Webpack 5，那应该是件很幸福的事，因为你不须要任何代价，只须要几行配置，就能间接在我的项目 A 用上我的项目 B 的新闻组件。不仅如此，还能够在我的项目 B 中应用我的项目 A 的轮播图组件。也就是说，通过 Module Federation 实现的代码共享是双向的，听起来真是想让人直呼：“学不动了！”。
Module Federation 实际
上面咱们来看看我的项目 A/B 的代码。
我的项目 A 的目录构造如下：
├── public│ └── index.html├── src│ ├── index.js│ ├── bootstrap.js│ ├── App.js│ └── Slides.js├── package.json└── webpack.config.js我的项目 B 的目录构造如下：
├── public│ └── index.html├── src│ ├── index.js│ ├── bootstrap.js│ ├── App.js│ └── NewsList.js├── package.json└── webpack.config.js我的项目 A、B 的差别次要在 App.js 中 import 的组件不同，两者的 index.js、bootstrap.js 都是一样的。
// index.jsimport("./bootstrap");// bootstrap.jsimport React from "react";import ReactDOM from "react-dom";import App from "./App";ReactDOM.render(<App />, document.getElementById("root"));我的项目 A 的 App.js：
import React from "react";import Slides from './Slides';const App = () => ( <div> <h2 style={{ textAlign: 'center' }}>App1, Local Slides</h2> <Slides /> </div>);export default App;我的项目 B 的 App.js：
import React from "react";import NewsList from './NewsList';const RemoteSlides = React.lazy(() => import("app1/Slides"));const App = () => ( <div> <h2 style={{ textAlign: 'center' }}>App 2, Local NewsList</h2> <NewsList /> </div>);export default App;当初咱们看看在接入 Module Federation 之前的 webpack 配置：
const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = { mode: "development", // 入口文件 entry: "./src/index", // 开发服务配置 devServer: { // 我的项目 A 端口为 3001，我的项目 B 端口为 3002 port: 3001, contentBase: path.join(__dirname, "dist"), }, output: { // 我的项目 A 端口为 3001，我的项目 B 端口为 3002 publicPath: "http://localhost:3001/", }, module: { // 应用 babel-loader 本义 rules: [ { test: /\.jsx?$/, loader: "babel-loader", exclude: /node_modules/, options: { presets: ["@babel/preset-react"], }, }, ], }, plugins: [ // 解决 html new HtmlWebpackPlugin({ template: "./public/index.html", }), ],};配置：exposes/remotes
当初，咱们批改 webpack 配置，引入 Module Federation，让我的项目 A 引入我的项目 B 的新闻组件。
// 我的项目 B 的 webpack 配置const { ModuleFederationPlugin } = require("webpack").container;module.exports = { plugins: [ new ModuleFederationPlugin({ // 提供给其余服务加载的文件 filename: "remoteEntry.js", // 惟一ID，用于标记以后服务 name: "app2", // 须要裸露的模块，应用时通过 `${name}/${expose}` 引入 exposes: { "./NewsList": "./src/NewsList", } }) ]};// 我的项目 A 的 webpack 配置const { ModuleFederationPlugin } = require("webpack").container;module.exports = { plugins: [ new ModuleFederationPlugin({ name: "app1", // 援用 app2 的服务 remotes: { app2: "app2@http://localhost:3002/remoteEntry.js", } }) ]};咱们重点关注 exposes/remotes：
- 提供了
exposes选项的示意以后利用是一个Remote，exposes内的模块能够被其余的Host援用，援用形式为import(${name}/${expose})。 - 提供了
remotes选项的示意以后利用是一个Host，能够援用remote中expose的模块。
而后批改我的项目 A 的 App.js：
import React from "react";import Slides from './Slides';// 引入我的项目 B 的新闻组件const RemoteNewsList = React.lazy(() => import("app2/NewsList"));const App = () => ( <div> <h2 style={{ textAlign: 'center' }}>App1, Local Slides, Remote NewsList</h2> <Slides /> <React.Suspense fallback="Loading Slides"> <RemoteNewsList /> </React.Suspense> </div>);export default App;此时，我的项目 A 就曾经胜利接入了我的项目 B 的新闻组件。咱们再看看我的项目 A 的网络申请，我的项目 A 配置了 app2: "app2@http://localhost:3002/remoteEntry.js" 的 remote 后，会先申请我的项目 B 的 remoteEntry.js 文件作为入口。在咱们 import 我的项目 B 的新闻组件时，就会去获取我的项目 B 的 src_NewsList_js.js 文件。
配置：shared
除了后面提到的模块引入和模块裸露相干的配置外，还有个 shared 配置，次要是用来防止我的项目呈现多个公共依赖。
例如，咱们以后的我的项目 A，曾经引入了一个 react/react-dom，而我的项目 B 裸露的新闻列表组件也依赖了 react/react-dom。如果不解决这个问题，我的项目 A 就会加载两个 react 库。这让我回想起刚刚入行的时候，公司的一个我的项目因为是 PHP 模板拼接的形式，不同部门在本人的模板中都引入了一个 jQuery，导致我的项目中引入了三个不同版本的 jQuery，特地影响页面性能。
所以，咱们在应用 Module Federation 的时候肯定要记得，将公共依赖配置到 shared 中。另外，肯定要两个我的项目同时配置 shared ，否则会报错。
接下来，咱们在浏览器关上我的项目 A，在 Chrome 的 network 面板中，能够看到我的项目 A 间接应用了我的项目 B 的 react/react-dom。
双向共享
后面提到过，Module Federation 的共享能够是双向的。上面，咱们将我的项目 A 也配置成一个 Remote，将我的项目 A 的轮播图组件裸露给我的项目 B 应用。
// 我的项目 B 的 webpack 配置const { ModuleFederationPlugin } = require("webpack").container;module.exports = { plugins: [ new ModuleFederationPlugin({ name: "app2", filename: "remoteEntry.js", // 裸露新闻列表组件 exposes: { "./NewsList": "./src/NewsList", }, // 援用 app1 的服务 remotes: { app1: "app1@http://localhost:3001/remoteEntry.js", }, shared: { react: { singleton: true }, "react-dom": { singleton: true } } }) ]};// 我的项目 A 的 webpack 配置const { ModuleFederationPlugin } = require("webpack").container;module.exports = { plugins: [ new ModuleFederationPlugin({ name: "app1", filename: "remoteEntry.js", // 裸露轮播图组件 exposes: { "./Slides": "./src/Slides", }, // 援用 app2 的服务 remotes: { app2: "app2@http://localhost:3002/remoteEntry.js", }, shared: { react: { singleton: true }, "react-dom": { singleton: true } }, }) ]};在我的项目 B 中应用轮播图组件：
// App.jsimport React from "react";import NewsList from './NewsList';+const RemoteSlides = React.lazy(() => import("app1/Slides"));const App = () => ( <div>- <h2 style={{ textAlign: 'center' }}>App 2, Local NewsList</h2>+ <h2 style={{ textAlign: 'center' }}>App 2, Remote Slides, Local NewsList</h2>+ <React.Suspense fallback="Loading Slides">+ <RemoteSlides />+ </React.Suspense> <NewsList /> </div>);export default App;同时引入多个依赖
Module Federation 也反对一次性 Remote 多个我的项目。咱们能够新建一个我的项目 C，同时引入我的项目 A 的轮播图组件和我的项目 B 的新闻列表组件。
// 我的项目 C 的 webpack 配置// 其余配置与之前的我的项目基本一致，除了须要将端口批改为 3003const { ModuleFederationPlugin } = require("webpack").container;module.exports = { plugins: [ new ModuleFederationPlugin({ name: "app3", // 同时依赖我的项目 A、B remotes: { app1: "app1@http://localhost:3001/remoteEntry.js", app2: "app2@http://localhost:3002/remoteEntry.js", }, shared: { react: { singleton: true }, "react-dom": { singleton: true } } }) ]};接入组件：
import React from "react";const RemoteSlides = React.lazy(() => import("app1/Slides"));const RemoteNewsList = React.lazy(() => import("app2/NewsList"));const App = () => ( <div> <h2 style={{ textAlign: 'center' }}>App 3, Remote Slides, Remote Remote</h2> <React.Suspense fallback="Loading Slides"> <RemoteSlides /> <RemoteNewsList /> </React.Suspense> </div>);export default App;加载逻辑
这里有一个点须要特地留神，就是入口文件 index.js 自身没有什么逻辑，反而将逻辑放在了 bootstrap.js 中，index.js 去动静加载 bootstrap.js。
// index.jsimport("./bootstrap");// bootstrap.jsimport React from "react";import ReactDOM from "react-dom";import App from "./App";ReactDOM.render(<App />, document.getElementById("root"));如果删掉 bootstrap.js，将逻辑间接放到 index.js 是否可行呢？通过测试，的确是不可行的。
次要起因是 remote 裸露的 js 文件须要优先加载，如果 bootstrap.js 不是一个异步逻辑，在 import NewsList 的时候，会依赖 app2 的 remote.js，如果间接在 main.js 执行，app2 的 remote.js 基本没有加载，所以会有问题。
通过 network 面板也能够看出，remote.js 是先于 bootstrap.js 加载的，所以咱们的 bootstrap.js 必须是个异步逻辑。
我的项目 A 的加载逻辑如下：
加载 main.js
main.js 外面次要是 webpack 的一些 runtime 逻辑，以及 remote 申请和 bootstrap 申请。
加载 remote.js
main.js 会优先加载我的项目 B 的 remote.js，该文件会裸露 exposes 中配置的外部组件供内部应用。
加载 bootstrap.js
main.js 加载本人的主逻辑 bootstrap.js，bootstrap.js 会应用到 app2 的新闻列表组件。
外部应用 __webpack_require__.e 来加载新闻组件， __webpack_require__.e 在 main.js 中有定义。
/* webpack/runtime/ensure chunk */(() => { __webpack_require__.f = {}; __webpack_require__.e = (chunkId) => { // __webpack_require__.e 会通过传入的 chunkId 在 __webpack_require__.f 中查找 return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => { __webpack_require__.f[key](chunkId, promises); return promises; }, [])); };})();__webpack_require__.f 一共有三个局部：
__webpack_require__.f.remotes = (chunkId, promises) => {} // webpack/runtime/remotes__webpack_require__.f.consumes = (chunkId, promises) => {} // webpack/runtime/consumes__webpack_require__.f.j = (chunkId, promises) => {} // webpack/runtime/jsonp咱们临时只看 remotes 的逻辑，因为咱们的新闻组件是作为 remote 加载进来的。
/* webpack/runtime/remotes loading */ (() => { var installedModules = {}; var chunkMapping = { "webpack_container_remote_app2_NewsList": [ "webpack/container/remote/app2/NewsList" ] }; var idToExternalAndNameMapping = { "webpack/container/remote/app2/NewsList": [ "default", "./NewsList", "webpack/container/reference/app2" ] }; __webpack_require__.f.remotes = (chunkId, promises) => { // chunkId: webpack_container_remote_app2_NewsList chunkMapping[chunkId].forEach((id) => { // id: webpack/container/remote/app2/NewsList var data = idToExternalAndNameMapping[id]; // require("webpack/container/reference/app2")["./NewsList"] var promise = __webpack_require__(data[2])[data[1]]; return promise; }); } })();能够看到，最初的调用形式会变成 require("webpack/container/reference/app2")["./NewsList"]，而这个模块在之前加载的 app2 的 remote.js 曾经定义过。
src_NewsList_js.js 的加载由 remote.js 发动。
总结
Webpack 5 提供的 Module Federation 还是很弱小的，特地是在多个我的项目中进行代码共享，提供了极大的便当，然而这有一个致命毛病，须要你们所有的我的项目都基于 Webpack，而且曾经降级到了 Webpack 5。相比起 Module Federation，集体还是更喜爱 vite 提供的计划，利用浏览器原生的模块化能力，进行代码共享。
残缺代码能够拜访我的 github，如果想看更多对于 Module Federation 的案例，能够拜访官网仓库。