introduction.md

1. 概念

将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用，各个前端应用可以独立运行、独立开发、独立部署。

2. 解决的问题

• 前端应用臃肿，编译部署慢，维护难度大。
• 技术栈冲突，迁移成本高。

3. 核心思想

• 技术无关
• 独立部署
• 独立开发
• 独立运行

4. 微前端的好处

• 按照业务域或者更细的粒度对应用进行拆分（领域驱动开发）。
• 让前端应用高内聚，低耦合，可以独立扩展、升级和替换。
• 方便测试、部署、问题定位。

5. 需要考虑的问题

• 应用间如何隔离
• 静态资源隔离及共享：避免js、css文件冲突，按需加载资源，共享公共资源。
• 构建、发布、部署流程
• 打点
• 调试

6. 实现方案

7.1 iframe

• 优点：

  • iFrame不受父页面的CSS或者全局的JavaScript影响
  • iFrame的改造门槛低

• 缺点：

  • 会进行资源的重复加载，占用额外的内存
  • 其会阻塞主页面的onload事件，会影响页面的并行加载。
  • 无法提供SEO。

7.2 Web Components

• Shadow DOM：兼容性较差

7. 细节问题实现方案

• 共享公共资源：在 webpack 生产环境构建配置中剔除公用的模块，改为统一通过CDN的方式引入。