2026年Webpack模塊聯(lián)邦與代碼共享技能測評卷

2026年Webpack模塊聯(lián)邦與代碼共享技能測評卷考試時(shí)間：______分鐘總分：______分姓名：______一、選擇題1.Webpack模塊聯(lián)邦（ModuleFederation）最初由哪個(gè)團(tuán)隊(duì)提出并貢獻(xiàn)給Webpack社區(qū)？（）A.VercelB.FacebookC.GoogleD.Node.jsFoundation2.在模塊聯(lián)邦的配置中，`remotes`字段用于定義主應(yīng)用（Host）需要加載哪些遠(yuǎn)程應(yīng)用（Remote）的代碼？其配置項(xiàng)的值通常是？（）A.遠(yuǎn)程應(yīng)用的基礎(chǔ)URLB.遠(yuǎn)程應(yīng)用的Webpack配置對象C.遠(yuǎn)程應(yīng)用的本地路徑D.遠(yuǎn)程應(yīng)用的構(gòu)建版本號3.在模塊聯(lián)邦的`remotes`配置中，`@remoteName/remoteEntry.js`的結(jié)構(gòu)大致是怎樣的？（）A.一個(gè)包含`exports`和`hot`對象的普通JavaScript模塊文件B.一個(gè)包含`getDependencies`和`init`函數(shù)的對象C.一個(gè)配置Webpack運(yùn)行時(shí)的JSON文件D.一個(gè)定義共享模塊列表的文本文件4.`exposes`字段在模塊聯(lián)邦中扮演什么角色？（）A.定義主應(yīng)用需要暴露給遠(yuǎn)程應(yīng)用的本地模塊路徑B.定義遠(yuǎn)程應(yīng)用需要暴露給主應(yīng)用的模塊路徑和導(dǎo)出對象C.配置共享模塊的版本策略D.指定遠(yuǎn)程應(yīng)用的基礎(chǔ)URL5.當(dāng)`shared`配置項(xiàng)在主應(yīng)用和遠(yuǎn)程應(yīng)用中同時(shí)存在時(shí)，其值會如何處理？（）A.主應(yīng)用的配置會覆蓋遠(yuǎn)程應(yīng)用的配置B.遠(yuǎn)程應(yīng)用的配置會覆蓋主應(yīng)用的配置C.兩者會合并，以遠(yuǎn)程應(yīng)用的優(yōu)先級為準(zhǔn)D.兩者會合并，以主應(yīng)用的優(yōu)先級為準(zhǔn)6.模塊聯(lián)邦的`shared`配置中，`type:'var'`表示共享模塊的方式是？（）A.在編譯時(shí)將共享模塊代碼嵌入主應(yīng)用或遠(yuǎn)程應(yīng)用的最終打包文件中B.在運(yùn)行時(shí)通過`remotes`從遠(yuǎn)程應(yīng)用動態(tài)加載共享模塊C.在構(gòu)建時(shí)將共享模塊的引用替換為本地副本D.在運(yùn)行時(shí)自動從網(wǎng)絡(luò)緩存加載共享模塊7.使用模塊聯(lián)邦實(shí)現(xiàn)代碼共享時(shí)，如果主應(yīng)用和多個(gè)遠(yuǎn)程應(yīng)用都依賴同一個(gè)第三方庫（如`lodash`），選擇哪種共享方式通常能獲得較好的加載性能和運(yùn)行時(shí)效率？（）A.`type:'singleVersion'`B.`type:'versionRange'`C.`type:'global'`(注意：此選項(xiàng)可能不標(biāo)準(zhǔn)，但考察點(diǎn)在于單一版本的優(yōu)勢)D.`type:'local'`(注意：此選項(xiàng)可能不標(biāo)準(zhǔn)，但考察點(diǎn)在于避免重復(fù)打包)8.模塊聯(lián)邦默認(rèn)共享哪些類型的模塊？（）A.所有第三方庫B.所有入口文件C.所有未被`exclude`排除的、非內(nèi)部Webpack模塊D.所有通過`import()`語法導(dǎo)入的模塊9.在模塊聯(lián)邦中，`crossOrigin:'use-credentials'`通常用于什么場景？（）A.允許主應(yīng)用加載同域遠(yuǎn)程應(yīng)用暴露的模塊B.允許主應(yīng)用加載跨域遠(yuǎn)程應(yīng)用暴露的模塊，并攜帶CookieC.強(qiáng)制所有遠(yuǎn)程模塊使用CORS加載D.禁用遠(yuǎn)程模塊的CORS安全策略10.模塊聯(lián)邦中，`optimization.runtimeChunk:'single'`的設(shè)置與模塊聯(lián)邦的優(yōu)化有何關(guān)系？（）A.會阻止共享模塊的運(yùn)行時(shí)代碼被分離B.會為每個(gè)遠(yuǎn)程應(yīng)用生成一個(gè)獨(dú)立的運(yùn)行時(shí)腳本C.會將所有遠(yuǎn)程應(yīng)用的運(yùn)行時(shí)代碼合并到一個(gè)腳本中D.對模塊聯(lián)邦的運(yùn)行時(shí)加載沒有影響二、多項(xiàng)選擇題1.以下哪些是使用模塊聯(lián)邦的主要優(yōu)勢？（）A.顯著減少初始加載包的大小B.實(shí)現(xiàn)不同項(xiàng)目間的代碼按需加載和復(fù)用C.簡化微前端架構(gòu)中的依賴管理D.提升應(yīng)用的運(yùn)行時(shí)性能E.完全消除版本沖突問題2.Webpack配置中，哪些字段是模塊聯(lián)邦的核心配置項(xiàng)？（）A.`module聯(lián)邦`B.`optimization.runtimeModuleFederation`C.`resolve.alias`D.`exposes`E.`shared`3.模塊聯(lián)邦的`shared`配置項(xiàng)中，可以通過哪些字段來控制共享行為？（）A.`name`(模塊名)B.`version`(指定版本)C.`scope`(限制共享范圍)D.`exclude`(排除特定模塊)E.`type`(共享方式)4.在配置模塊聯(lián)邦時(shí)，需要考慮哪些潛在的性能問題或挑戰(zhàn)？（）A.首次加載遠(yuǎn)程模塊可能導(dǎo)致的延遲B.運(yùn)行時(shí)環(huán)境下的網(wǎng)絡(luò)請求開銷C.共享模塊版本不匹配導(dǎo)致的錯(cuò)誤D.過多的`remotes`可能導(dǎo)致構(gòu)建和運(yùn)行時(shí)復(fù)雜度增加E.`shared`模塊的更新可能影響所有依賴它的應(yīng)用5.以下哪些說法描述了模塊聯(lián)邦中主應(yīng)用（Host）和遠(yuǎn)程應(yīng)用（Remote）的關(guān)系？（）A.主應(yīng)用必須加載遠(yuǎn)程應(yīng)用才能運(yùn)行B.遠(yuǎn)程應(yīng)用可以獨(dú)立于主應(yīng)用存在并發(fā)布其暴露的模塊C.主應(yīng)用可以動態(tài)地通過`import()`加載遠(yuǎn)程模塊D.遠(yuǎn)程應(yīng)用需要知道主應(yīng)用的存在才能暴露模塊E.主應(yīng)用和遠(yuǎn)程應(yīng)用可以使用不同的Webpack配置三、簡答題1.請簡述Webpack模塊聯(lián)邦的“運(yùn)行時(shí)共享”（RuntimeSharing）模式與“編譯時(shí)打包”（Build-timeBundling）模式的區(qū)別，并說明各自適用于哪些場景。2.在配置模塊聯(lián)邦時(shí)，`exposes`字段的作用是什么？請舉例說明如何使用`exposes`讓一個(gè)遠(yuǎn)程應(yīng)用暴露其內(nèi)部模塊`./components/Button`給主應(yīng)用使用。3.解釋`shared`配置項(xiàng)中的`type:'singleVersion'`和`type:'versionRange'`的含義。當(dāng)存在多個(gè)依賴同一共享模塊的不同版本的應(yīng)用時(shí)，這兩種類型分別會如何處理？四、配置實(shí)踐題假設(shè)存在三個(gè)Node.js項(xiàng)目：*項(xiàng)目A(main-app):主應(yīng)用，需要使用項(xiàng)目B提供的`@b/components`組件庫。*項(xiàng)目B(lib-ui):遠(yuǎn)程應(yīng)用，提供`@b/components`組件庫，自身也依賴項(xiàng)目C的基礎(chǔ)工具。*項(xiàng)目C(base-utils):遠(yuǎn)程應(yīng)用，提供`utils`工具庫，被項(xiàng)目B依賴。請為項(xiàng)目A和項(xiàng)目B分別編寫Webpack配置片段（`webpack.config.js`部分核心內(nèi)容），實(shí)現(xiàn)以下功能：1.項(xiàng)目A能夠通過模塊聯(lián)邦動態(tài)加載項(xiàng)目B的`@b/components/Button`組件。2.項(xiàng)目B能夠通過模塊聯(lián)邦動態(tài)加載項(xiàng)目C的`utils`庫。3.優(yōu)化代碼共享策略，使得`utils`庫在可能的情況下只被打包一次，并由一個(gè)應(yīng)用負(fù)責(zé)暴露。4.項(xiàng)目A和項(xiàng)目B都應(yīng)配置共享`lodash`庫，使用`type:'singleVersion'`。五、問題分析與優(yōu)化題1.在一個(gè)使用模塊聯(lián)邦的大型項(xiàng)目中，發(fā)現(xiàn)主應(yīng)用加載速度比不使用模塊聯(lián)邦時(shí)有所下降。請分析可能的原因，并提出至少三種優(yōu)化措施。2.場景：項(xiàng)目A（主應(yīng)用）和項(xiàng)目B、項(xiàng)目C（遠(yuǎn)程應(yīng)用）都依賴同一個(gè)第三方UI庫`ui-lib`，版本分別為`^1.2.3`和`^2.0.1`。項(xiàng)目A需要使用項(xiàng)目B暴露的`ui-lib`組件，但項(xiàng)目C需要使用項(xiàng)目C暴露的`ui-lib`組件。請分析如何通過配置模塊聯(lián)邦的`shared`規(guī)則，使得主應(yīng)用能夠同時(shí)滿足加載不同版本的`ui-lib`組件的需求，并減少潛在沖突。試卷答案一、選擇題1.A2.A3.B4.B5.A6.B7.A8.C9.B10.C二、多項(xiàng)選擇題1.A,B,C,D2.A,B,D,E3.A,B,C,E4.A,B,C,D,E5.B,C,E三、簡答題1.解析思路：首先要區(qū)分兩種模式的核心區(qū)別：運(yùn)行時(shí)共享是代碼在運(yùn)行時(shí)從遠(yuǎn)程應(yīng)用動態(tài)加載；編譯時(shí)打包是共享模塊的代碼在主應(yīng)用或指定應(yīng)用編譯時(shí)就被包含或鏈接進(jìn)來。然后分別闡述各自的特點(diǎn)：運(yùn)行時(shí)共享適用于需要靈活加載、遠(yuǎn)程模塊更新頻繁、避免編譯時(shí)依賴的場景；編譯時(shí)打包（或稱編譯時(shí)復(fù)用）適用于確定需要復(fù)用、追求極致加載性能、希望將共享庫與主應(yīng)用緊密耦合的場景。最后結(jié)合應(yīng)用場景給出例子。2.解析思路：核心是理解`exposes`定義了遠(yuǎn)程應(yīng)用中哪個(gè)模塊（路徑）以及如何導(dǎo)出（`import*asXXfrom...`或`exportdefault...`），使其能在主應(yīng)用中被直接引用。示例中需要說明`exposes`的配置格式，即`{'遠(yuǎn)程應(yīng)用路徑/模塊路徑':{導(dǎo)出方式:'導(dǎo)出對象名'}}`，并明確`@b/components/Button`是相對路徑，導(dǎo)出方式為默認(rèn)導(dǎo)出。3.解析思路：分別解釋`singleVersion`（強(qiáng)制所有引用都使用同一個(gè)精確版本）和`versionRange`（允許在指定版本范圍內(nèi)使用不同次要或補(bǔ)丁版本，以獲取最新兼容更新）。處理方式是：`singleVersion`下，如果遇到版本沖突，則可能報(bào)錯(cuò)或加載失敗，需要手動調(diào)整；`versionRange`下，Webpack會嘗試尋找兼容的版本進(jìn)行合并，優(yōu)先使用范圍內(nèi)的最高版本，從而可能自動解決部分沖突或平滑更新。四、配置實(shí)踐題```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'}}},//...其他配置};```解析思路：實(shí)踐題考察核心配置。主應(yīng)用需要配置`remotes`指向遠(yuǎn)程應(yīng)用B，配置`shared`共享`lodash`。遠(yuǎn)程應(yīng)用B需要配置`remotes`指向遠(yuǎn)程應(yīng)用C，配置`shared`共享`lodash`和`utils`，并使用`exposes`暴露`Button`組件。關(guān)鍵點(diǎn)在于`name`的設(shè)置、`remotes`的URL配置、`shared`中`singleton:true`的使用（確保核心庫如React、Lodash只暴露一次）、`exposes`的格式化路徑和導(dǎo)出配置。共享策略上，`utils`和`lodash`都設(shè)置為`singleton:true`或`type:'singleVersion'`（取決于是否強(qiáng)制單一版本），確保它們只被一個(gè)遠(yuǎn)程應(yīng)用打包并暴露，主應(yīng)用和其他應(yīng)用加載。五、問題分析與優(yōu)化題1.解析思路：分析原因可以從多個(gè)角度：網(wǎng)絡(luò)延遲（遠(yuǎn)程應(yīng)用加載慢）、主應(yīng)用需要加載的遠(yuǎn)程模塊過多、共享模塊過大