后端有微服务，那前端呢？初探微前端的世界( 三 ) _微前端

将 A 项目中可以被複用的组件手动複制其代码至 B 项目。
将 A 荐中可以被複用的组件发佈到 npm 上，并且在 B 项目中安装。
融合 A 项目与 B 项目并用 monorepo 的架构进行开发。

相信不管是哪个方法都相当複杂而且后续的维护成本也很高，而且随著项目越来越大，之后的网站性能也是问题，即便用了 code splitting 或者是 dynamic import 能提昇的效能也有限。
不过这个声音 Webpack 听到了，在 Webpack 5 诞生后推出了一个全新的技术叫 Module Federation，Module Federation 的诞生就是为了帮助开发者可以 import 外部项目已经 bundle 好的文件，不用再经由额外的安装步骤相当方便。
Webpack Module Federation
上面介绍完 Micro Frontends 的实现方式后，接下来就要进入本篇文章的实战篇了，这边笔者会以 Webpack Module Federation 进行 Demo 。
首先笔者先介绍 Webpack Module Federation 的相关设定，在 Webpack Module Federation 的世界中我们一共会分为 Remote 以及 Host 两种设定区块，分别代表的是 modules export 以及 import 的部分，首先先介绍 Remote 的部分，在这个 plugin 中我们一共可以设定几个内容：
name
设定 export 出去的名字。
filename
设定 export 出去的文件名称，最终的使用方式会在下方的 import 区块做介绍，官方建议使用 remoteEntry.js 作为命名。
exposes
exposes 就是负责设定 modules 中需要被 export 的 components 文件 path alias，通常这边的写法都会是 './componentName': 'componentPath' ，在 key 的部分会用相对路径的写法原因是未来在 import 的时候就可以用上方设定好的 name 作为文件抓去的进入点。
举例来说：我们有一个 Button.jsx 的文件，这时候我们就可以在 exposes 的区块写上 './Button': './src/Button' ，到时候在 import 的时候就可以写上 name/Button 的方式抓去这个文件了。
shared
shared 则是当 components 有使用到相同的第三方组件时，可以用来设定的相关规范，基本上 shared 一共有三种呈现方式：

Array syntax：只要在 Array 内写上 package name 即可，写法上会像这样：shared: ['lodash']
Object syntax：可以更详细的设定 package，会以 package name 作为 Object key，后方的 value 则可以设定此 package 的版本，写法上会像这样：shared: { lodash: '^4.17.0' }
Object with sharing hints：基于 Object syntax 的架构上，填入 Webpack Module Federation 可支援的相关 Sharing hints 。

在 Object with sharing hints 这边一共可以设定非常多种内容，笔者这裡只单纯说明几个最常用的 sharing hints，想要了解所有的 sharing hints 的读者可以参考这个连结。

eager：让 Webpack 可以直接存取 modules，如果设定为 false 则使用 async fetch 的方式去取得分离后的 chunk，若设定为 true 则会打包到 remoteEntry 方便进行直接抓取。
requiredVersion：设定此 package 的版本。
singleton：使用 singleton 就代表此 package 只允许一个版本，并且只加载一次，通常在 react 、 react-dom 这种有 global internal state 的 libarary 加上此设定更是重要。

在 Shared 内笔者建议的写法是基于目前项目的 package dependencies 上再额外叠加一些自己想要设定的 Object with sharing hints，最终设定完的长像会像下图这样：

文章插图

这裡笔者提醒一下读者，假如读者在设定的过程中有遇到这个错误：Uncaught Error: Shared module is not available for eager consumption
代表读者需要额外在新增一个档案将 component render 到 DOM 的相关程式码都複制上去，最后再到 index.jsx 中去 import 这个文件。