从0到1搭建微前端：架构设计 | 真实项目总结

▌ 技术引导 我见过太多人做微前端，要么是搞了半年没搞定，要么是连基础框架都没搭好就去拆解模块。关键点在于别把微前端当成一个简单的拼接方案，它是个复杂系统，得从一开始就踩对节奏。我踩过坑，从配置 webpack 的 splitChunks 开始，到子应用加载时的样式隔离，再到全局状态管理的兼容性问题，整个过程都是在和浏览器的沙箱机制、模块加载策略以及子应用的生命周期玩博弈。别用 iframe，那是最原始的方案，性能差还容易被 XSS 攻击。真实项目里用的是 qiankun，但它在 2024 年的性能表现已经不够用了，容易卡顿，特别是子应用频繁切换时。我踩坑的重点在子应用的入口文件必须是通过 window.onload 执行，不能是 window.ready，否则会丢失一些初始化权限。如果你真想从 0 到 1 搭建，必须先定义好主应用和子应用的边界，把路由、状态、样式、通信这些细节提前做透，别等上线了才去补丁。 ▌ 技术参考 一 技术背景与核心概念 微前端是为解决单体应用复杂度高的问题而设计的架构，2024 年各大企业已经从实验阶段进入规模化落地。区别于传统的 iframe 方案，微前端依赖于模块化和动态加载技术，允许将一个应用拆分为多个子应用，各自独立开发、部署和维护。在真实项目中，微前端的核心在于如何管理子应用的加载顺序、生命周期、样式隔离和通信机制。关键技术点包括主应用的启动策略、子应用的加载方式、资源隔离方案以及全局状态同步。主应用必须通过一种方式知道子应用的入口，然后主动去加载，而不是让子应用自己注册。子应用的入口文件需要遵循特定格式，比如 require 或 import，否则会报错。在 2025 年的项目中，我们通过 window.onload 机制解决了子应用加载时的权限问题。 二 具体操作方法或配置步骤 搭建微前端的首要任务是选择一个合适的框架，qiankun 是目前最主流的选择。但实际操作中，需要先配置主应用的基础结构，安装 @qiankun/webpack-magic-string 和 @qiankun/loader，然后在 webpack 配置文件中添加 plugins 配置。比如： ```js plugins: [ new webpack.DefinePlugin({ __POWERED_BY_QIANKUN__: true }) ] ``` 这一步是关键，因为主应用需要知道它正在被作为微前端运行。子应用的入口文件必须导出一个函数，该函数接受参数，如 activeWhen。例如： ```js export async function bootstrap() { console.log('子应用 bootstrap'); } export async function mount(props) { console.log('子应用 mount', props); } export async function unmount() { console.log('子应用 unmount'); } ``` 主应用使用 qiankun 的 loadMicroApp 方法来加载子应用，必须传入子应用的 entry，例如： ```js loadMicroApp({ name: 'subApp1', entry: '//localhost:7101', container: '#subapp-container' }); ``` 如果遇到加载失败，先检查 entry 是否正确，再确认子应用是否在运行。 三 常见踩坑场景与避坑方案 子应用加载失败最常见的原因是 entry 路径不对，或者子应用没有正确配置。在 2024 年的项目中，我发现很多团队使用相对路径，结果部署后无法正常访问。正确的做法是使用绝对路径，例如：`//localhost:7101`。此外，子应用的入口文件必须是 JavaScript 文件，不能是 ts 或 jsx，否则会因为模块解析失败。还有，子应用的 mount 函数必须接收 props 参数，否则主应用无法注入全局状态。如果子应用挂载后没有显示，可能是样式隔离没生效，这时候需要检查是否在子应用的 html 文件里加了 `