webpack5-Module Federation

古城微笑少年丶 2022-10-10 12:44 97阅读 0赞

webpack5带来了很大的改变，删减了一些配置，优化了很多的内容

*  通过持久缓存提高构建性能
 *  为了改善长期缓存，使用了更好的 deterministic 算法，生产环境中默认打开
 *  通过更好的 Tree Shaking 和代码生成来降低打包大小

...

[webpack5升级公告][webpack5]

版本做了哪些优化就不再详细说明，可以自行点击上方的webpack官方发布5.0的公告，这里主要讲述一下webpack5的模块联邦。webpack5中我认为最

按照官网的解释即多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。

它的出现更好的便利了微前端的实现，在以前，各种微前端的实现方式，如iframe/路由分发/插件式/web component等等，都不能更好的解决依赖间组件资源共享的问题，大多数是通过npm仓库来尽可能的减少重复资源。

[webpack5模块联邦概念目标][webpack5 1]

现在通过webpack5可以区分本地模块和远程模块，可以将远程chunk的模块引入后，正常的调用远程的组件插入到本地容器中进行调用。即动态远程容器。

该容器接口支持 `get`  和 `init` 方法，下边以一个例子来具体说明：

远程容器实现(端口3002)：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70][]

加载容器：

(async () => {
        // 初始化共享作用域（shared scope）用提供的已知此构建和所有远程的模块填充它
        await __webpack_init_sharing__('default');
        const container = window['app2']; 
        // 初始化容器 它可能提供共享模块
        await container.init(__webpack_share_scopes__.default);
        const factory = await window['app2'].get('./Widget')
        console.log(factory(),'++__++++')
        return factory()
      })();

官方的具体展示案例：[点击前往][Link 1]

正如官网所说，它的个例用于每个页面单独构建/将组件库作为容器/动态远程容器等。

感叹！这不就是为微前端模式专门设计的嘛

页面单独构建：**可以单独部署每个页面。在更新路由或添加新路由时部署主体应用程序。主体应用程序将常用库定义为共享模块，以避免在页面构建中出现重复。**

组件库作为容器，预计很多场景下在未来所有共同依赖的组件库，将不再需要逐个升级package.json的版本，再打包发布，而是可以直接引入线上chunk的代码片段，发布后所有项目统一调用。官网中是这样声明的：

**多应用程序共享一个通用的组件库，可以将其构建成暴露所有组件的容器。每个应用程序使用来自组件库容器的组件。可以单独部署对组件库的更改，而不需要重新部署所有应用程序。应用程序自动使用组件库的最新版本。**

我后续也会结合webpack5这一特性，发挥其最大的价值，来管理webpack类的项目。

[webpack5]: https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/
[webpack5 1]: https://webpack.docschina.org/concepts/module-federation/#concept-goals
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70]: /images/20221005/7e36bf910eb74254848fb0bbe930f9d8.png
[Link 1]: https://stackblitz.com/github/webpack/webpack.js.org/tree/master/examples/module-federation?terminal=start&terminal=