摘要
本文针对业务域通用容器标准化改造核心需求，系统对比 Loader、Vite Module Federation、Webpack Module Federation、Qiankun 四种主流前端容器化方案，从改造成本、技术风险等核心维度剖析，输出可落地选型方案与实施建议，为企业级前端容器标准化建设提供决策依据。
前言
随着企业前端应用规模化发展，业务域通用容器的标准化、统一化、可复用性成为架构升级核心诉求。容器改造核心目标是实现主容器与子模块解耦、依赖共享、能力统一，同时最小化业务侵入、控制改造成本。本文基于真实业务场景，梳理通用改造项，对比四种主流方案，给出落地推荐。
一、必做通用改造项（所有方案共享）
无论选择哪种方案，以下基础标准化改造为必做项，是业务正常运行的前提。
1.1 通用改造执行流程
启动容器标准化改造
App Context 能力适配
ALB 网关统一适配
基础通用能力改造
CDN 静态资源适配
通用改造完成
进入方案专属改造阶段
1.2 App Context 核心能力适配
主容器与子模块需统一上下文依赖能力，确保互通，具体如下：
| 能力标识 | 功能说明 |
|---|---|
| $gt | 国际化翻译能力，保障多语言适配 |
| request | 统一 API 请求封装，规范调用方式 |
| store | Vuex 全局状态共享，实现数据互通 |
| router | Vue Router 路由跳转，保障导航统一 |
| 其他扩展 | 适配子模块自定义依赖能力 |
1.3 ALB 网关适配
- 统一接口鉴权，实现登录态统一管理
- 配置本地开发代理，解决跨域问题
- 适配线上 ALB 反向代理，保障接口稳定
1.4 基础通用能力改造
- 支持 Excel、CSV 等文件下载，适配业务导出需求
- 规范 JS、CSS 等静态资源路径，避免加载异常
1.5 CDN 静态资源适配
- 字体文件、技术栈全家桶、UI 组件库、通用工具库统一 CDN 加载
二、四大改造方案总览
从改造难度、综合成本、实施风险三个核心维度，对四种方案快速评级：
| 改造方案 | 改造难度 | 综合成本 | 风险评估 |
|---|---|---|---|
| Loader 方案 | 低 | 低 | 低 |
| Vite Federation | 高 | 高 | 中 |
| Webpack Module Federation | 中 | 高+ | 高+ |
| Qiankun | 中 | 高 | 中 |
三、各方案详细技术解析
从核心行动项、改造成本、方案评估、技术支撑四个维度，拆解各方案实操细节与优劣。
3.1 Loader 方案（✅ 官方首选推荐）
内部自研轻量级容器加载方案，核心优势：无侵入、低改造、高兼容，无需修改编译逻辑，适配存量业务。
3.1.1 核心行动项
| 角色 | 改造内容 |
|---|---|
| 主容器 | 接入 Loader 插件，完成配置并启动 |
| 子模块 | 将本地 Shared/xx 依赖切换为 npm 共享包 |
3.1.2 改造成本
主容器（3 步完成）：安装 @portal/plugin-loader → 配置基础参数 → 执行 loader.run() 启动；子模块：仅切换依赖，无需修改业务代码。
3.1.3 方案评估
| 评估维度 | 评级 | 核心说明 |
|---|---|---|
| 改造难度 | 低 | 步骤清晰，无复杂配置 |
| 综合成本 | 低 | 改造量极小，人力成本低 |
| 风险评估 | 低 | 零侵入，不改变构建产出物 |
3.1.4 技术支撑
核心插件：@portal/plugin-loader；共享依赖：@portal/shared-* 系列 npm 包。
3.2 Vite Federation 方案
基于 @originjs/vite-plugin-federation 的原生 Vite 模块联邦方案，适配纯 Vite 技术栈，兼容性待提升。
3.2.1 核心行动项
| 角色 | 改造内容 |
|---|---|
| 主容器 | 接入插件，完成 Shared 容器全量重构 |
| 子模块 | 适配共享规则，接收主容器资源 |
3.2.2 改造成本
主容器：接入插件+Shared 容器重构+兼容性调试；子模块：适配规则，部分需拷贝仓库魔改，无渐进式改造能力。
重要警告：官方 Demo 正常，真实业务接入存在大量兼容问题，需深度调试。
3.2.3 方案评估
| 评估维度 | 评级 | 核心说明 |
|---|---|---|
| 改造难度 | 高 | 重构成本高，调试难度大 |
| 综合成本 | 高 | 主、子模块改造量均较大 |
| 风险评估 | 中 | 共享依赖兼容风险不可控 |
3.2.4 技术支撑
核心插件：@originjs/vite-plugin-federation
3.3 Webpack Module Federation 方案
Webpack5 原生模块联邦方案，生态成熟，但需将主容器构建工具从 Vite 迁移至 Webpack5，成本极高。
3.3.1 核心行动项
| 角色 | 改造内容 |
|---|---|
| 主容器 | Vite 迁移至 Webpack5，接入联邦能力，改造 Shared 容器 |
| 子模块 | 适配新宿主共享规则 |
3.3.2 改造成本
主容器：构建工具迁移+联邦配置+Shared 适配+调试；子模块：适配规则，部分需拷贝仓库改造。
3.3.3 方案评估
| 评估维度 | 评级 | 核心说明 |
|---|---|---|
| 改造难度 | 中 | 构建迁移难度极高 |
| 综合成本 | 高+ | 迁移成本占比极高 |
| 风险评估 | 高+ | 修改编译底层，影响构建产出物 |
3.3.4 技术支撑
构建工具：webpack@5.89.0+；核心能力：Webpack 原生 Module Federation。
3.4 Qiankun 微前端方案
阿里开源成熟微前端框架，主打应用隔离、沙箱防护，支持多 JS 框架，适配子应用强隔离场景。
3.4.1 核心行动项
| 角色 | 改造内容 |
|---|---|
| 主容器 | 接入 Qiankun，配置路由、ALB 挂载子应用 |
| 子模块 | 接入框架，实现生命周期钩子，改造 Webpack 配置 |
3.4.2 改造成本
主容器：安装 Qiankun（yarn add qiankun 或 npm i qiankun -S）+ 配置 + 路由/ALB 适配；子模块：安装框架+实现钩子+Webpack 改造+依赖切换。
3.4.3 方案评估
| 评估维度 | 评级 | 核心说明 |
|---|---|---|
| 改造难度 | 中 | 文档完善，子模块 Webpack 改造较复杂 |
| 综合成本 | 高 | 子模块改造量较大 |
| 风险评估 | 中 | 子应用改造可能影响业务 |
3.4.4 技术支撑
核心框架：Qiankun
四、方案核心维度对比矩阵
4.1 方案选型决策流程
低成本/低风险/存量项目
全新 Vite 项目
Webpack5 统一技术栈
强隔离/跨团队
开始选型
改造核心诉求
Loader 方案
Vite Federation
Webpack MF
Qiankun
4.2 多维度对比矩阵
| 对比维度 | Loader | Vite Federation | Webpack MF | Qiankun |
|---|---|---|---|---|
| 主容器改造成本 | 低（3 步完成） | 高（Shared 重构） | 高+（构建迁移） | 中（配置+ALB） |
| 子模块改造成本 | 低（依赖转换） | 高（可能拷贝改造） | 中（可能拷贝改造） | 中（Webpack 改造） |
| 编译底层变更 | ❌ | ❌ | ✅ | 主❌/子✅ |
| 构建产出物影响 | ❌ | ❌ | ✅ | 主❌/子✅ |
| 调试复杂度 | 低 | 高 | 中 | 中 |
| 生态成熟度 | 内部成熟 | 较新、兼容差 | 业界成熟 | 业界成熟 |
五、最终选型推荐
5.1 首选方案：Loader 方案
适配绝大多数企业存量业务，核心推荐理由：改造成本最低、实施风险最低、落地能力完善、支持渐进式改造，零侵入不影响现有业务。
5.2 备选方案适用场景
| 方案 | 最佳适用场景 |
|---|---|
| Vite Federation | 全新 Vite 项目，无存量业务负担 |
| Webpack MF | 全团队统一 Webpack5，有充足改造周期 |
| Qiankun | 子应用需强隔离、跨团队独立开发 |
六、方案优劣势全景总结
| 方案 | 核心优势 | 核心劣势 | 推荐指数 |
|---|---|---|---|
| Loader | 成本低、风险低、零侵入、渐进式改造 | 内部方案，依赖团队支持 | 高 |
| Vite Federation | Vite 原生优势，模块联邦能力 | 兼容差、调试难、改造量大 | 低 |
| Webpack MF | 生态成熟、稳定性强 | 迁移成本高、周期长、风险高 | 低 |
| Qiankun | 社区活跃、隔离性强、多框架支持 | 子应用改造量大、配置复杂 | 中 |
七、结论
- 通用改造是基础：App Context、ALB、CDN 适配为必做项，优先完成；
- 存量业务首选 Loader：以最低成本、最低风险完成容器标准化，性价比最高；
- 避免高风险改造：非特殊场景，不推荐 Webpack MF、Vite Federation 方案；
- 按需选择微前端：Qiankun 适配强隔离场景，通用改造无明显优势。