2026年Webpack模块联邦与代码共享技能测评卷

2026年Webpack模块联邦与代码共享技能测评卷考试时间：______分钟总分：______分姓名：______一、选择题1.Webpack模块联邦（ModuleFederation）最初由哪个团队提出并贡献给Webpack社区？（）A.VercelB.FacebookC.GoogleD.Node.jsFoundation2.在模块联邦的配置中，`remotes`字段用于定义主应用（Host）需要加载哪些远程应用（Remote）的代码？其配置项的值通常是？（）A.远程应用的基础URLB.远程应用的Webpack配置对象C.远程应用的本地路径D.远程应用的构建版本号3.在模块联邦的`remotes`配置中，`@remoteName/remoteEntry.js`的结构大致是怎样的？（）A.一个包含`exports`和`hot`对象的普通JavaScript模块文件B.一个包含`getDependencies`和`init`函数的对象C.一个配置Webpack运行时的JSON文件D.一个定义共享模块列表的文本文件4.`exposes`字段在模块联邦中扮演什么角色？（）A.定义主应用需要暴露给远程应用的本地模块路径B.定义远程应用需要暴露给主应用的模块路径和导出对象C.配置共享模块的版本策略D.指定远程应用的基础URL5.当`shared`配置项在主应用和远程应用中同时存在时，其值会如何处理？（）A.主应用的配置会覆盖远程应用的配置B.远程应用的配置会覆盖主应用的配置C.两者会合并，以远程应用的优先级为准D.两者会合并，以主应用的优先级为准6.模块联邦的`shared`配置中，`type:'var'`表示共享模块的方式是？（）A.在编译时将共享模块代码嵌入主应用或远程应用的最终打包文件中B.在运行时通过`remotes`从远程应用动态加载共享模块C.在构建时将共享模块的引用替换为本地副本D.在运行时自动从网络缓存加载共享模块7.使用模块联邦实现代码共享时，如果主应用和多个远程应用都依赖同一个第三方库（如`lodash`），选择哪种共享方式通常能获得较好的加载性能和运行时效率？（）A.`type:'singleVersion'`B.`type:'versionRange'`C.`type:'global'`(注意：此选项可能不标准，但考察点在于单一版本的优势)D.`type:'local'`(注意：此选项可能不标准，但考察点在于避免重复打包)8.模块联邦默认共享哪些类型的模块？（）A.所有第三方库B.所有入口文件C.所有未被`exclude`排除的、非内部Webpack模块D.所有通过`import()`语法导入的模块9.在模块联邦中，`crossOrigin:'use-credentials'`通常用于什么场景？（）A.允许主应用加载同域远程应用暴露的模块B.允许主应用加载跨域远程应用暴露的模块，并携带CookieC.强制所有远程模块使用CORS加载D.禁用远程模块的CORS安全策略10.模块联邦中，`optimization.runtimeChunk:'single'`的设置与模块联邦的优化有何关系？（）A.会阻止共享模块的运行时代码被分离B.会为每个远程应用生成一个独立的运行时脚本C.会将所有远程应用的运行时代码合并到一个脚本中D.对模块联邦的运行时加载没有影响二、多项选择题1.以下哪些是使用模块联邦的主要优势？（）A.显著减少初始加载包的大小B.实现不同项目间的代码按需加载和复用C.简化微前端架构中的依赖管理D.提升应用的运行时性能E.完全消除版本冲突问题2.Webpack配置中，哪些字段是模块联邦的核心配置项？（）A.`module联邦`B.`optimization.runtimeModuleFederation`C.`resolve.alias`D.`exposes`E.`shared`3.模块联邦的`shared`配置项中，可以通过哪些字段来控制共享行为？（）A.`name`(模块名)B.`version`(指定版本)C.`scope`(限制共享范围)D.`exclude`(排除特定模块)E.`type`(共享方式)4.在配置模块联邦时，需要考虑哪些潜在的性能问题或挑战？（）A.首次加载远程模块可能导致的延迟B.运行时环境下的网络请求开销C.共享模块版本不匹配导致的错误D.过多的`remotes`可能导致构建和运行时复杂度增加E.`shared`模块的更新可能影响所有依赖它的应用5.以下哪些说法描述了模块联邦中主应用（Host）和远程应用（Remote）的关系？（）A.主应用必须加载远程应用才能运行B.远程应用可以独立于主应用存在并发布其暴露的模块C.主应用可以动态地通过`import()`加载远程模块D.远程应用需要知道主应用的存在才能暴露模块E.主应用和远程应用可以使用不同的Webpack配置三、简答题1.请简述Webpack模块联邦的“运行时共享”（RuntimeSharing）模式与“编译时打包”（Build-timeBundling）模式的区别，并说明各自适用于哪些场景。2.在配置模块联邦时，`exposes`字段的作用是什么？请举例说明如何使用`exposes`让一个远程应用暴露其内部模块`./components/Button`给主应用使用。3.解释`shared`配置项中的`type:'singleVersion'`和`type:'versionRange'`的含义。当存在多个依赖同一共享模块的不同版本的应用时，这两种类型分别会如何处理？四、配置实践题假设存在三个Node.js项目：*项目A(main-app):主应用，需要使用项目B提供的`@b/components`组件库。*项目B(lib-ui):远程应用，提供`@b/components`组件库，自身也依赖项目C的基础工具。*项目C(base-utils):远程应用，提供`utils`工具库，被项目B依赖。请为项目A和项目B分别编写Webpack配置片段（`webpack.config.js`部分核心内容），实现以下功能：1.项目A能够通过模块联邦动态加载项目B的`@b/components/Button`组件。2.项目B能够通过模块联邦动态加载项目C的`utils`库。3.优化代码共享策略，使得`utils`库在可能的情况下只被打包一次，并由一个应用负责暴露。4.项目A和项目B都应配置共享`lodash`库，使用`type:'singleVersion'`。五、问题分析与优化题1.在一个使用模块联邦的大型项目中，发现主应用加载速度比不使用模块联邦时有所下降。请分析可能的原因，并提出至少三种优化措施。2.场景：项目A（主应用）和项目B、项目C（远程应用）都依赖同一个第三方UI库`ui-lib`，版本分别为`^1.2.3`和`^2.0.1`。项目A需要使用项目B暴露的`ui-lib`组件，但项目C需要使用项目C暴露的`ui-lib`组件。请分析如何通过配置模块联邦的`shared`规则，使得主应用能够同时满足加载不同版本的`ui-lib`组件的需求，并减少潜在冲突。试卷答案一、选择题1.A2.A3.B4.B5.A6.B7.A8.C9.B10.C二、多项选择题1.A,B,C,D2.A,B,D,E3.A,B,C,E4.A,B,C,D,E5.B,C,E三、简答题1.解析思路：首先要区分两种模式的核心区别：运行时共享是代码在运行时从远程应用动态加载；编译时打包是共享模块的代码在主应用或指定应用编译时就被包含或链接进来。然后分别阐述各自的特点：运行时共享适用于需要灵活加载、远程模块更新频繁、避免编译时依赖的场景；编译时打包（或称编译时复用）适用于确定需要复用、追求极致加载性能、希望将共享库与主应用紧密耦合的场景。最后结合应用场景给出例子。2.解析思路：核心是理解`exposes`定义了远程应用中哪个模块（路径）以及如何导出（`import*asXXfrom...`或`exportdefault...`），使其能在主应用中被直接引用。示例中需要说明`exposes`的配置格式，即`{'远程应用路径/模块路径':{导出方式:'导出对象名'}}`，并明确`@b/components/Button`是相对路径，导出方式为默认导出。3.解析思路：分别解释`singleVersion`（强制所有引用都使用同一个精确版本）和`versionRange`（允许在指定版本范围内使用不同次要或补丁版本，以获取最新兼容更新）。处理方式是：`singleVersion`下，如果遇到版本冲突，则可能报错或加载失败，需要手动调整；`versionRange`下，Webpack会尝试寻找兼容的版本进行合并，优先使用范围内的最高版本，从而可能自动解决部分冲突或平滑更新。四、配置实践题```javascript//main-appwebpack.config.js(部分)module.exports={//...其他配置runtimeChunk:'single',optimization:{moduleFederation:{name:'main-app',remotes:{'lib-ui':'http://localhost:3001/remoteEntry.js'},shared:{'react':{singleton:true},'react-dom':{singleton:true},'lodash':{type:'singleVersion'}}}},//...其他配置};//lib-uiwebpack.config.js(部分)module.exports={//...其他配置optimization:{moduleFederation:{name:'lib-ui',remotes:{'base-utils':'http://localhost:3002/remoteEntry.js'},shared:{'react':{singleton:true},'react-dom':{singleton:true},'lodash':{type:'singleVersion'},'utils':{singleton:true}},exposes:{'./components/Button':'./src/components/Button'}}},//...其他配置};```解析思路：实践题考察核心配置。主应用需要配置`remotes`指向远程应用B，配置`shared`共享`lodash`。远程应用B需要配置`remotes`指向远程应用C，配置`shared`共享`lodash`和`utils`，并使用`exposes`暴露`Button`组件。关键点在于`name`的设置、`remotes`的URL配置、`shared`中`singleton:true`的使用（确保核心库如React、Lodash只暴露一次）、`exposes`的格式化路径和导出配置。共享策略上，`utils`和`lodash`都设置为`singleton:true`或`type:'singleVersion'`（取决于是否强制单一版本），确保它们只被一个远程应用打包并暴露，主应用和其他应用加载。五、问题分析与优化题1.解析思路：分析原因可以从多个角度：网络延迟（远程应用加载慢）、主应用需要加载的远程模块过多、共享模块过大