module federation模块联邦与微前端

module federation是什么

webpack5新增了module federation，module federation的作用，将每个构建(build)作为容器(这是一个概念)，构建后的资源可以正常部署，同时还具备在运行时对外暴露其中的模块，这就意味着多个构建可以独立完成，独立部署，所需的依赖可以在运行时加载。对于多个构建公共的依赖，可以通过shared来指定，这些依赖也可以在运行时加载，并且只加载一次。

事实上，公共依赖模块也可以通过npm包的形式来实现共享，这种方式的共享不得不依赖于app shell这种容器预先加载共享包。module federation只在第一次加载模块A时加载共享包，加载模块B时共享包已被缓存。

模块与容器的概念有点重叠，容器实际上是一些模块的集合，与构建相关，是我们传统意义上的bundle，只是在加入module federation能力后，容器可以对外导出成员，这一点跟模块比较接近而已。

这种能力刚好与微前端架构所需的前端集成能力一致。前端集成技术，就是应用A将应用B、C等应用的某些页面、组件、片段等等，集成到自己页面里。

加入module federation的构建

传统的构建过程，模块之间如果存在依赖关系，这些模块会在一个构建过程中打包成一个bundle。

而module federation让这种存在依赖关系的模块，各自有各自的构建过程，并各自实现自己的bundle和部署，最终在运行时异步获取依赖模块。这种方式提高了模块的自主性，但可能因为异步的原因，降低了首屏渲染性能、运行时的用户交互体验等等。

有对外导出的容器示例

这里展示一个module federation的示例使用。products项目展示一些产品名称，其工程目录如下

- products/- public/- index.html // 模板- src/- bootstrap.js // 导入faker生成假数据，导出一个mount方法，将html内容挂载到某个DOM节点上- index.js  // 入口文件，导入bootstrap.js模块- package.json - webpack.config.js // 配置module federation的配置文件

bootstrap.js的内容如下

// 声明为shared的模块，会被拆分为异步模块，所以需要异步加载
const faker = await import("faker");function mount(el) {let products = "";for (let i = 1; i <= 5; i++) {products += `<div>${faker.commerce.productName()}</div>`;}el.innerHTML = products;
}if (process.env.NODE_ENV === "development") {// 依赖该模块的容器，必须提供一个id属性为'dev-products'的DOM元素const el = document.querySelector("#dev-products");if (el) mount(el);
}export { mount };
构建产物

webpack的module federation相关配置示例

  devServer: {port: 8081,},// 省略其他传统的配置plugins: [new ModuleFederationPlugin({name: "products", // 当前容器的名称，其他容器导入该容器时的标识filename: "remoteEntry.js", // 当前容器的入口文件，与output.filename不是一回事exposes: {// 导出成员对应的模块会被拆离为异步模块"./Index": "./src/bootstrap.js", // 指定对外暴露的模块列表，标识符: 模块地址},shared: { // 公共的共享模块，其他容器也会使用faker这个模块，共享模块在构建产物会被作为单独的包存在，由容器异步加载faker: {singleton: true,},},}),
],

在加入module federation的webpack配置下，构建产物发生了一定的变化，除了传统的bundle外，还会有如下产物

  • module federation插件产生的容器入口文件，如上面配置的remoteEntry.js;
  • 对外暴露的模块，如上面配置的"./Index": "./src/bootstrap.js"的产物src_bootstrap_js.js;
  • 共享模块，如上面配置的faker，产物是vendors-node_modules_faker_index_js.js;

而通过模板生成的index.html中，不仅有传统的bundle产物main.js，也会有remoteEntry.js。对于传统的部署而言，remoteEntry.js是没必要的。main.js与remoteEntry.js有很多重复的webpack胶水代码。

容器对外的入口文件remoteEntry.js

查看由module federation生成的容器入口文件，可以看到与传统的bundle不一样的地方在于，容器入口文件包含一个变量声明var products, 与配置name: "products"一致。

remoteEntry.js会包含一个moduleMap，包含模块标识符’./Index’与src_bootstrap_js.js；

remoteEntry.js包含本地容器的初始化init方法和获取导出成员get方法，被加载后导出了products变量，携带init和get方法。

/***/ // "webpack/container/entry/products":
/*!***********************!*\!*** container entry ***!\***********************/
/*** remoteEntry.js中 "webpack/container/entry/products" 对应的函数内部的eval代码整理如下*/var moduleMap = {"./Index": () => {return __webpack_require__.e("src_bootstrap_js").then(() => () =>__webpack_require__(/*! ./src/bootstrap.js */ "./src/bootstrap.js"));},
};
// container的getter，将container中的module加载，并返回加载后的module
var get = (module, getScope) => {__webpack_require__.R = getScope;getScope = __webpack_require__.o(moduleMap, module)? moduleMap[module](): Promise.resolve().then(() => {throw new Error('Module "' + module + '" does not exist in container.');});__webpack_require__.R = undefined;return getScope;
};
// 初始化容器，通过shareScope来提供对外共享的module，如果声明了shared，每个build都会有shared的module，即便有重复
// 如果共享module已经被使用了，那么该容器的共享module会被忽略，但会作为fallback
var init = (shareScope, initScope) => {if (!__webpack_require__.S) return;var name = "default";var oldScope = __webpack_require__.S[name];if (oldScope && oldScope !== shareScope)throw new Error("Container initialization failed as it has already been initialized with a different share scope");__webpack_require__.S[name] = shareScope;return __webpack_require__.I(name, initScope);
};// This exports getters to disallow modifications
__webpack_require__.d(exports, {get: () => get,init: () => init,
});//# sourceURL=webpack://products/container_entry?;

有导入其他容器的容器示例

通常导入别的容器的容器会作为一个app shell，加载其他容器的模块，这正是微前端的客户端集成方案。这里的container项目，加载products的bootstrap模块，使用mount方法挂载HTML内容。目录示例如下

- container/- public/- index.html // 模板- src/- bootstrap.js // 导入products的bootstrap模块，使用mount方法，将html内容挂载到某个DOM节点上- index.js  // 入口文件，导入bootstrap.js模块- package.json - webpack.config.js // 配置module federation的配置文件

其中，bootstrap.js的内容如下

// 这里不使用const { mount: mountProducts } = await import("products/Index")的语法
// 是因为模块本身不导入导出任何成员，webpack不认为是ESM，只有ESM才能使用顶层的await语法
// 在这种情况下，使用import ESM语法，那么index.js必须使用import('./bootstrap.js')的动态导入语法，因为远程模块的导入必须是异步的
import { mount as mountProducts } from "products/Index"
// 模板index.html中已经有<div id="prod-products"></div>
mountProducts(document.querySelector("#prod-products"));

相关的module federation配置如下

  devServer: {port: 8080},plugins: [new ModuleFederationPlugin({name: "container", // 容器名称remotes: { // 指定远程模块依赖// 模块别名: '模块别名@模块入口地址'，模块别名是要在代码里导入该模块成员时使用products: "products@http://localhost:8081/remoteEntry.js", // 模块名称: 模块地址}}),

container容器应用可以拿到products容器应用的bootstrap模块，使用mount方法来挂载HTML内容了。可以尝试一下，启动8080端口，可以看到页面有一些由products容器应用的bootstrap模块挂载的HTML内容。

构建产物

由于container容器没有对外暴露的模块，因此没有remoteEntry.js这样的入口文件，也没有共享模块，所以container容器的构建产物与传统的构建一致，只有bundle。bundle文件中，有包含products容器的引用和模块加载代码

/***/ "webpack/container/reference/products":
/*!****************************************************************!*\!*** external "products@http://localhost:8081/remoteEntry.js" ***!\****************************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {var __webpack_error__ = new Error();
module.exports = new Promise((resolve, reject) => {if(typeof products !== "undefined") return resolve();__webpack_require__.l("http://localhost:8081/remoteEntry.js", (event) => {if(typeof products !== "undefined") return resolve();var errorType = event && (event.type === 'load' ? 'missing' : event.type);var realSrc = event && event.target && event.target.src;__webpack_error__.message = 'Loading script failed.\n(' + errorType + ': ' + realSrc + ')';__webpack_error__.name = 'ScriptExternalLoadError';__webpack_error__.type = errorType;__webpack_error__.request = realSrc;reject(__webpack_error__);}, "products");
}).then(() => (products));/***/ })

模块成员标识符规则

模块对外导出的成员应该如何标识？例如，products对外导出的./Index能不能写成’Index’或者’Hello’？

在导入成员时，使用import xxx from 'products/Index'，webpack会转换为’./Index’作为模块标识符，因此products对外导出成员时的标识符不能随意写，要按照规则./[name]的形式来书写；
webpack内部使用了一系列映射关系来确定导出成员，如下面代码所示

        var chunkMapping = {/******/ // src/bootstrap.js中导入了products/Index和products/World"src_bootstrap_js": [/******/ "webpack/container/remote/products/Index", /******/"webpack/container/remote/products/World"/******/]/******/};/******/var idToExternalAndNameMapping = {/******/"webpack/container/remote/products/Index": [/******/"default", /******/"./Index", /******/ 导入成员的标识符"webpack/container/reference/products"/******/],/******/"webpack/container/remote/products/World": [/******/"default", /******/"./World", /******/ 导入成员的标识符"webpack/container/reference/products"/******/]/******/};

异步模块有异步依赖时使用异步导入还是同步导入

module federation导致的模块拆分，如果是异步模块A依赖了异步模块B，在A中可以同步导入模块Bimport xxx from 'module-B'，因为webpack会使用Promise.all来加载模块A和被A依赖的模块B。所以只要使用动态导入`import(‘module-A’)即可，不需要在A中使用动态导入B了。当然，动态导入B模块也是可以的。

总结

module federation是一种支持当前应用在运行时加载其他运行时应用内部模块的技术，在webpack配置时，当前应用需要用remote指定要加载的应用名称, 其他应用使用exposes指定对外暴露的内部模块，使用shared指定公共的共享模块。应用可以各自独立构建，独立部署，只在运行时产生耦合（加载）。各个应用在开发构建时都是独立的，降低了开发构建时的耦合性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/51022.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

泰安网站建设有几大特点

泰安网站建设有几大特点

泰安网站建设的特点可以分为以下几个方面&#xff1a; 一、突出地域特色。泰安是山东省的一个地级市&#xff0c;具有悠久的历史和深厚的文化底蕴。在网站建设过程中&#xff0c;泰安的特色文化和旅游资源应得到充分的展示。可以通过优美的图片、详细的介绍和生动的文字&#x…
阅读更多...
【Python 基础】字典和结构化数据 -1

【Python 基础】字典和结构化数据 -1

字典和结构化数据 在本文中，我将介绍字典数据类型，它提供了一种灵活的访问和组织数据的方式。然后，结合字典与关于列表的知识，你将学习如何创建一个数据结构，对井字棋盘建模。 字典数据类型 像列表一样，“字典”是许多值的集合。但不像列表的下标，字典的索引可以使用…
阅读更多...
科普文：11个编程原则助你写出优雅代码

科普文：11个编程原则助你写出优雅代码

糟糕的代码形式可以千千万&#xff0c;优雅且高质量的代码却是极其的相通&#xff0c;如何写出让人信服的高质量代码&#xff1f;编程是一个看似简单&#xff0c;但是还是有很大学问&#xff0c;特别是编写出高质量的优雅代码&#xff0c;最后我们再总结下本文总结的 11种原则&…
阅读更多...
开源消息队列比较

开源消息队列比较

目录 1. Apache Kafka 1.1安装步骤 1.1.1使用Docker安装 1.1.1手动安装 1.2 C#使用示例代码 1.2.1 安装Confluent.Kafka 1.2.2生产者代码示例 1.2.3消费者代码示例 1.3特点 1.4使用场景 2. RabbitMQ 2.1安装步骤 2.1.1使用Docker安装 2.1.2手动安装 2.2 C#使用示…
阅读更多...
【STM32】SysTick定时器

【STM32】SysTick定时器

SysTick定时器 前言一、介绍最大计时时间 固件库函数体现用途 总结 前言 参考一下猫咪博主的文章&#xff0c;作为补充学习⇨【STM32】Systick滴答定时器 当然我主要还是跟着金善愚老师学的&#xff0c;我觉得他真的有种高中班主任的亲切感。那个1812的名号往那里一放&#x…
阅读更多...
ChanCMS是一款基于Express和MySQL研发的高质量实用型CMS管理系统

ChanCMS是一款基于Express和MySQL研发的高质量实用型CMS管理系统

系统介绍&#xff1a;ChanCMS 基于expressmysql的一款轻量级高质量cms管理系统 ChanCMS是一款基于Express和MySQL研发的高质量实用型CMS管理系统。它具备多种类型网站开发&#xff0c;如公司&#xff0c;企业&#xff0c;学校&#xff0c;政府&#xff0c;图片&#xff0c;下载…
阅读更多...
【vluhub】elasticsearch漏洞

【vluhub】elasticsearch漏洞

Elasticsearch介绍 是Apache旗下的一个开源的、分布式、RESTful的搜索和分析引擎&#xff0c;适用于java语言项目 默认端口9200 kali中搭建ElasticHD, 即可未授权绕过ES可视化界面 直通车 https://github.com/360EntSecGroup-Skylar/ElasticHD/releases/download/1.4/elas…
阅读更多...
吃肉的刷题记录2-贪心

吃肉的刷题记录2-贪心

文章目录 贪心贪心算法的特点&#xff1a;贪心算法的应用场景&#xff1a;贪心算法的设计步骤&#xff1a;实现注意事项&#xff1a; 例题: leetcode.322.零钱兑换例题: leetcode 5.最长回文字符串 贪心 贪心算法是一种在每一步选择中都采取在当前状态下最好或最优&#xff08…
阅读更多...
Csrf复习（pikachu靶场和防御手段）

Csrf复习（pikachu靶场和防御手段）

CSRF漏洞简介 CSRF又称跨站请求伪造&#xff0c;是指攻击者在用户登录的状态下&#xff08;浏览器保存了用户的cookie&#xff09;通过伪造恶意url诱导用户点击&#xff0c;借助用户的cookie网站权限&#xff08;冒充用户身份来进行非法操作&#xff0c;对于服务器来说是合法的…
阅读更多...
视觉SLAM第二讲

视觉SLAM第二讲

SLAM分为定位和建图两个问题。 定位问题 定位问题是通过传感器观测数据直接或间接求解位置和姿态。 通常可以分为两类&#xff1a;基于已知地图的定位和基于未知地图的定位。 基于已知地图的定位 利用预先构建的地图&#xff0c;结合传感器数据进行全局定位。SLAM中的全局…
阅读更多...
如何利用开源Bug管理系统提高团队效率

如何利用开源Bug管理系统提高团队效率

国内外主流的10款开源bug管理系统对比&#xff1a;PingCode、Worktile、Trac、WebIssues、MantisBT、Bugzilla 、Fossil、The Bug Genie、TestLink 、OpenProject。 在软件开发的复杂世界中&#xff0c;Bug管理可能是一个令人头疼的问题&#xff0c;尤其是当工具不足以捕捉和解…
阅读更多...
这才是做项目的正确打开方式

这才是做项目的正确打开方式

基于大数据的推荐机制&#xff0c;对于没有接触到信息的人而言&#xff0c;会认为获取行业外的信息会很困难&#xff0c;对于已经接触到信息的人而言&#xff0c;又会出现选择困难症。当系统对你锁定标签后&#xff0c;就会频繁的给你推荐跟标签对应的信息&#xff0c;信息一多…
阅读更多...
[PM]面试题-能力问题

[PM]面试题-能力问题

你在公司里面主要做什么? 负责产品的全生命周期的管理, 包括产品调研, 需求整理, 产品设计,文档产出, 产品评审, 项目推进, 产品迭代等工作 你是怎么做需求分析的? 首先我们要收集需求, 然后把需求放到需求池里进行管理, 需求管理首先要对需求进行优先级划分, 在根据需求设…
阅读更多...
DjangoRF-8-9-modules和interfaces接口

DjangoRF-8-9-modules和interfaces接口

1、接口编写顺序&#xff0c;同6–7一样。
阅读更多...
quicgo

quicgo

quic-go/quic-go 简介: Go语言实现的QUIC协议。&#xff08;QUIC是一个兼顾TCP连接的可靠性&#xff0c;同时大幅降低延迟的通用网络传输层协议&#xff09; | GitHub 中文社区 https://www.github-zh.com/projects/55637575-quic-go quic-go 是 Go 中 QUIC 协议&#xff08;…
阅读更多...
Kafka面试三道题

Kafka面试三道题

针对Kafka的面试题&#xff0c;从简单到困难&#xff0c;我可以给出以下三道题目&#xff1a; 1. Kafka的基本概念与优势 问题&#xff1a;请简要介绍Kafka是什么&#xff0c;并说明它相比传统消息队列的优势有哪些&#xff1f; 答案&#xff1a; Kafka定义&#xff1a;Apa…
阅读更多...
【传知代码】智慧医疗：纹理特征VS卷积特征（论文复现）

【传知代码】智慧医疗：纹理特征VS卷积特征（论文复现）

在这个无处不在的技术革新的时代&#xff0c;计算机视觉和机器学习成为了医疗领域中不可或缺的力量。在这篇文章中&#xff0c;我们将探讨两种突出的技术&#xff1a;纹理特征和卷积特征。它们如何在医学影像分析中竞争与协作&#xff0c;为医生提供更深入、更精确的诊断信息&a…
阅读更多...
iOS基础---常用三方库：Masonry、SDWebImage

iOS基础---常用三方库：Masonry、SDWebImage

系列文章目录 iOS基础—多线程&#xff1a;GCD、NSThread、NSOperation iOS基础—Category vs Extension iOS基础—常用三方库&#xff1a;Masonry、SDWebImage 文章目录 系列文章目录一、Masonry1.Masonry简介2.使用示例3.源码剖析 二、SDWebImage1.SDWebImage简介2.主要功能…
阅读更多...
不同WEB下的的ApplicationContext的选择

不同WEB下的的ApplicationContext的选择

依赖 ApplicationContext类型选择 默认情况下&#xff0c;spring通过选择的web端的框架来选择使用哪个ApplicationContext子类&#xff0c;默认情况下我们一般使用spring mvc框架&#xff0c;这个时候AC的实现类为 org.springframework.boot.web.servlet.context.AnnotationC…
阅读更多...
在 LCD 上显示 png 图片-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板

在 LCD 上显示 png 图片-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板

在 LCD 上显示 png 图片 PNG 简介 无损压缩&#xff1a;PNG 使用 LZ77 派生算法进行无损压缩&#xff0c;确保图像质量不受损&#xff0c;且压缩比高 体积小&#xff1a;通过高压缩比&#xff0c;PNG 文件体积小&#xff0c;适合网络传输 索引彩色模式&#xff1a;PNG-8 格式…
阅读更多...
最新文章

Copyright @ 2022~2023