大家好，我是奶綠茶
今天來分享 Webpack5 超強的新功能 federation plugin。
情境：
A 站有個 Component，要給 B 站和 C 站使用。
解法1：
發佈成 npm 套件，讓其他站使用
解法2：
A 站將要共用的元件，發佈成 library umd 版。
解法3：
Webpack5 federation plugin。
A 站，remote 端設定把要共用的元件寫在 exposes 裡
plugins: [
new ModuleFederationPlugin({
name: "app1", // 記住這裡的 app1
filename: "remoteEntry.js", // 發佈後的檔名
exposes: {
"./Header": "./src/components/Header",
"./Footer": "./src/components/Footer",
"./MyModel": "./src/libs/MyModel"
},
shared: { // 共用 module
react: {
// eager: true,
// ture 的話，會先把有用到的 node_modules 都先包裡來
singleton: true,
requiredVersion: deps.react,
},
'react-dom': {
// eager: true,
singleton: true,
requiredVersion: deps['react-dom'],
}
},
}),
]
B 站， webpack 設定
其中 remotes app1 需要對到 A 站的 name
new ModuleFederationPlugin({
remotes: {
app1: "app1@http://localhost:9527/remoteEntry.js",
},
shared: {
react: {
singleton: true,
strictVersion: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
strictVersion: true,
requiredVersion: deps['react-dom'],
}
},
}),B 站載入遠端 A 站的 Component, 使用 lazy 方法。
import React from 'react';
const Header = React.lazy(() => import('app1/Header'));
// 直接使用 import 的寫法
export default function (){
return (
<div>
<React.Suspense fallback='Loading header'>
<Header initCount={10} />
</React.Suspense>
</div>
)
}或是可以直接這樣寫, 連 lazy 都不用寫。
import Header from 'app1/Header';
export default () => {
return (
<Header />
);
}import 的來源是遠端 A站 的 js 檔，那表示一定都是要非同步載入
所以官法文件有寫到需要一個 bootstrap(不是那個 bootstrap) 前導進入點
// index.js 非同步載入
import("./bootstrap"); // bootstrap.js 這裡是本來的程式進入點
import App from "./components/App";
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<App />, document.getElementById("root"));
來看一下 network 發生什麼事
1 hostMain 是 B 站的進入點，也就提 index.js
2 remoteEntry 是 A 站 Federation Plugin 產生的。
3 src_bootstrap_jsx.js 是 B 站的 bootstrap.js
這時就先開始判斷那些 modules 需要載入
如果把 A 站 remote 站的 eager 設成 true 的話，就會把需要的 module 通通都先包在一起。
可以發現並沒有載入 react，因為被包到 remoteEntry 裡了
下一篇再來補充 nextjs 該怎麼設定。
SourceCode
祝大家學習愉快。
參考文章：
https://webpack.js.org/concepts/module-federation/
https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669
https://github.com/module-federation/module-federation-examples
https://www.qiyuandi.com/zhanzhang/zonghe/12450.html
https://dev.to/brandonvilla21/micro-frontends-module-federation-with-webpack-5-426