百度工程师带你了解 Module Federation
作者 | 一贫
导读
本文介绍了 Module Federation 的概念、应用场景，并结合具体的代码示例帮助大家对 Module Federation 的模块共享，公共依赖加载有个初步的认识，方便后续更深入的学习相关内容，同时也给微前端的探索提供一种新的思路，定会给大家一定的提升和启发。
全文 5405 字，预计阅读时间 14 分钟。
01 什么是 Module Federation（MF）？
普遍直译为『模块联邦』，我们看看官网是怎么说的？
Motivation
Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually. This is often known as Micro-Frontends, but is not limited to that.
多个独立的构建可以形成一个应用程序。这些独立的构建不会相互依赖，因此可以单独开发和部署它们。
这通常被称为微前端，但并不仅限于此。
通俗点讲，即 MF 提供了能在当前应用中远程加载其他服务器上应用的能力。对此，可以引出下面两个概念：
host：引用了其他应用的应用
remote：被其他应用所使用的应用
△图片来源于网络
它与我们普遍讨论的基座应用、微应用有所不同，它是去中心化的，相互之间是平等的，每个应用是单独部署在各自的服务器，每个应用都可以引用其他应用，也能被其他应用所引用，即每个应用可以充当 host 的角色，亦可以作为 remote 出现。
△图片来源于网络
02 应用场景
微前端：通过 shared 以及 exposes 可以将多个应用引入同一应用中进行管理。
资源复用，减少编译体积：可以将多个应用都用到的通用组件单独部署，通过 MF 的功能在 runtime 时引入到其他项目中，这样组件代码就不会编译到项目中，同时亦能满足多个项目同时使用的需求，一举两得。
03 如何使用
项目结构如下：
module-home：首页，在 layout 展示一个字符串。
module-layout：布局，只包含一个 html 模板。
module-lib：暴露工具方法，共享 lodash 库。
3.1 相关配置参数一览
3.2 各应用的配置
如下图所示：在 layout 中展示了 home 挂载的节点，控制台也打印了调用 lib 中方法的 log，同时 lib 分享的 lodash 也生效了（全程只加载了一个 lodash）。
3.3 以 remoteLib 为例简要分析
host 加载自己的 bundle main.js，其中使用 jsonp 加载对应 remote 提供的 remoteLib.js；
在 remote 中暴露了全局变量，host 将 remote 注入后可以获取对应模块，其中的共享模块使用前会检查自身有没有，如果没有再去加载 remote 的内容。
04 拓展学习
可以学习开源项目：基于 Webpack 5 Module Federation，优雅且实用的微前端解决方案 https://github.com/yuzhanglong/mf-lite。
——END——
参考资料：
[1]How to Build a Micro Frontend with Webpack's Module Federation Plugin
[2]Webpack 新功能 Module Federation 深入解析
[3]基于 Webpack Module Federation，这可能是一个比较优雅的微前端解决方案
[4]探索 webpack5 新特性 Module federation 在腾讯文档的应用
[5]Module Federation 原理剖析
推荐阅读：
版权声明: 本文为 InfoQ 作者【百度Geek说】的原创文章。
原文链接:【http://xie.infoq.cn/article/a1bf511ccd6bd5a2bf7aa54c5】。文章转载请联系作者。
百度官方技术账号 2021-01-22 加入
关注我们，带你了解更多百度技术干货。
评论