导语：项目示例代码可参考个人仓库https://github.com/ZhenxingXiao/webpack-trial-demo，代码在webpack入门代码基础之上增加Module Federation模块支持，方便入门使用。更多复杂（例如配置SSR情况）情形示例可参考https://github.com/module-federation/module-federation-examples以及结合Next.js的情况https://github.com/module-federation/next.js/pull/2。
1. 前端工程当前落地的瓶颈
随着云基础设施的布局进一步发展，项目的弹性可伸缩以及可演进架构越发受到开发者的青睐。以微服务为开端，以及弹性数据库的进展，后台/中台/数据库的可伸缩弹性架构相继被建立和完善。然而前端却似乎一直未有一个良好的解决方案。虽然也有ESI，S3 Streaming等解决方案，但是在真实落地过程中缺并不令人满意。而随着微前端的进一步发展，这些矛盾尤为凸显，其主要提现有二：
一方面，为了优化首页渲染效率，更多的前端项目开始采用SSR方式，以牺牲服务端的计算成本为代价来增加首页渲染效率。但本质上，这个问题是因为首页加载了很多不需及时解释的脚本代码造成的。那么异步的懒加载，或者说运行时加载就显得更为重要。
另一方面，多个前端项目重用公共代码的方案主要就是剥离和复制公用代码，或者将公用代码作为NPM lib发布，以供其他项目使用。无论怎样，若要升级公用代码，就免不了对所有对其依赖的项目进行修改和升级维护。具体可参考“探索 webpack5 新特性Module federation在腾讯文档的应用”
传统代码共享方案
如今这个问题的解决方案来了，我们可以运行时使用Dynamic Import或者Module Federation，这是一个令人振奋东西，以至于Webpack 5社区称其为前端架构游戏的变革者。
2. 技术详解
以下代码均采用webpack的基本入门代码，方便webpack入门者构建示例，首先项目文件夹下配package.json以及webpack.config.js文件。
2.1 Dynamic Import
首先构建基本的html模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Output Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<script src="app.js"></script></body>
</html>
然后建立src目录并创建入口文件index.js
async function clickHandle(){
const m = await import('./print.js');//运行时引入print模块
m.default();
}
function component() {
const element = document.createElement('div');
const btn = document.createElement('button');
element.innerHTML = 'hello webpack';
btn.innerHTML = 'Click me and check the console!';
btn.onclick = clickHandle;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
注意运行时引入模块"import('./print.js');", 另外建立print.js
const Print = () => {
console.log("get called from print.js");
}
export default Print
这就是ES6标准的动态引入，在html初始化时，并不会加载print脚本，而是当点击button时，才会引入print脚本，实现动态引入。
2.2 Webpack5 Module Federation
在使用Webpack5 Module Federation 功能之前，值得注意两个地方：
- Webpack 5当前并没有正式加入Module Federation功能，而是在开发分支中加入的，所以需要从git仓库中安装Webpack 5 以及html-webpack-plugin，即
npm install --save-dev git://github.com/webpack/webpack.git#dev-1
npm git://github.com/ScriptedAlchemy/html-webpack-plugin.git#master
- 入口文件中不要写功能代码，而是建立另外的“根”代码bootstrap.js
// index.js
import('./bootstrap.js');
// app1/bootstrap.js
import Print from 'app2/Print'
function clickHandle(){
Print();
}
function component() {
const element = document.createElement('div');
element.id = 'test-container';
const btn = document.createElement('button');
element.innerHTML = 'hello webpack';
btn.innerHTML = 'Click me and check the console!';
btn.onclick = clickHandle;
element.appendChild(btn);
return element;
}
if(!document.querySelector('#test-container')){
document.body.appendChild(component());
}
在App1总配置webpack.config.js为
module.exports = {
// other configs
plugins: [
// other configs
new ModuleFederationPlugin({
name: "app1",
library: { type: "var", name: "app1" },
remotes: {
app2: "app2"
},
shared: []
})
]
};
而在App2总配置webpack.config.js为
module.exports = {
// other configs
plugins: [
// other configs
new ModuleFederationPlugin({
name: "app2",
library: { type: "var", name: "app2" },
filename: "remoteEntry.js",// host消费remote的入口文件
exposes: {
'Print':'./src/components/Print'//暴漏模块
},
shared: []
})
]
};
在app1的html中添加
<script src="http://127.0.0.1:3502/remoteEntry.js"></script>
自然，在host当中就是利用这个脚本嗅探到remote当中暴漏的模块并引用。其和心就是利用remote配置以及webpack_require函数以及jsonp技术加载远程模块到当前运行时环境当中。
3. 总结
这里，重要的几个概念是
host: 消耗其他remote暴漏模块的webpack构建的应用
remote: 提供并暴漏模块的webpack构建的应用
Bidirectional host: 当然，这个是很容易理解的，就是webpack构建的应用，既可以作为remote暴漏模块，也可以作为host消费其他remote暴漏的模块，所以是一个双向的应用。当然我们也可以通过shared引入其他第三方模块，例如react，react-dom等。
如此我们便可以在运行时提供一个供其他应用消费的模块，即
运行时共享模块
如此，对于前端项目，特别是微服务的构建则更为松散
松散的前端项目构建
自然松散的耦合方式，让其落地场景更为广泛。例如微服务，父子项目或者沙箱情形等等。可以说有了Webpack 5 Module Federation让前端工程构建未来可期😊。
4*. 参考
[1]. Webpack 5 Module Federation: A game-changer in JavaScript architecture
[2]. 探索 webpack5 新特性Module federation在腾讯文档的应用
[3]. 三大应用场景调研，Webpack 新功能 Module Federation 深入解析
[4]. Webpack 5 and Module Federation - A Microfrontend Revolution
网友评论