考虑这样的场景,仪表盘是一个子模块。仪表盘有个报表,点击展示详情弹窗。弹窗里有复杂的交互: 包含一大堆代码。而该弹窗的内容,已在另一个模块中实现。如何实现该部分代码的复用?

方案1: 公用代码放基座里

需要该代码的,和基座通信。

缺点:基座代码可能会越来越大。

方案2: 公用代码做成 npm 包

缺点:开发调试,更新麻烦。

方案3: 加载多个模块,模块间通信

一个路由,对应一个激活的模块,和若干激活模块的部分功能依赖的模块。激活模块需要时和某模块通信,某模块来展示内容。

缺点:会多加载其他模块的不必要的代码。

方案4: 共享模块

每个构建都充当一个容器,也可将其他构建作为容器。通过这种方式,每个构建都能够通过从对应容器中加载模块来访问其他容器暴露出来的模块。

具体见 Module Federation。Module Federation 是 webpack5 提出的新特性,为了解决独立应用之间代码共享问题。主要是使用于微前端场景,但不仅限与此。我们简单理解为模块联邦,联邦的含义是:我可以通过一个个分散的联邦,组合成一个强大的帝国。所以在 webpack 的模块联邦里,每一个应用可以对外暴露自己的一些组件,供其他应用使用。

待探究。。。