微前端

这里记录了我在微前端领域的学习和实践经验，包括方案选型、项目改造、以及踩过的坑。

背景

随着业务发展，公司的前端项目从单体应用逐渐演变成 10+ 个独立的 Vue 项目。每个项目独立部署、独立维护，虽然灵活，但也带来了一些问题：

用户在不同系统间跳转体验割裂
基础能力重复建设
技术栈难以统一升级

微前端架构让我们可以在保持各子应用独立性的同时，提供统一的用户体验。

文章列表

理论篇

方案对比 - iframe、Web Components、JS Entry、HTML Entry、Module Federation 五种方案的系统对比
htmlEntry vs jsEntry - 两种加载方式的区别与适用场景

实践篇

改造实践 - 把 10+ 个独立 Vue 项目整合到一起的完整过程
版本更新提醒 - 解决"测试同学停留在旧版本"的问题，30 秒内提醒用户刷新

技术栈

我们最终选择了 micro-app 作为微前端框架，主要原因：

接入成本低，子应用几乎不需要改造
基于 Web Components，隔离性好
文档清晰，社区活跃

相关资源