微前端入门讲解

微前端入门

微前端概念介绍

前端是什么

​ 微前端是一种体系结构风格。是一种将可独立交付的前端应用程序组成 一个更大的整体 的架构风格。

特点

将庞大的整体拆成可控的小块，并明确他们之间的依赖关系。代码库更小、更内聚、可维护性更高、松耦合、自治的、团队可扩展性更好。渐进地升级、更新甚至重写部分前端功能成为了可能。

特点1：简单、松耦合的代码库

特点2：增量升级

特点3：独立部署

特点4：团队自治

单体应用与微前端的对比

实现方案

实现上，关键问题在于：

• 多个 Bundle 如何集成？

  微前端架构中一般会有个*容器应用（container application）*将各子应用集成起来，职责如下：

  • 渲染公共的页面元素，比如 header、footer
  • 解决横切关注点（cross-cutting concerns），如身份验证和导航
  • 将各个微前端整合到一个页面上，并控制微前端的渲染区域和时机

  集成方式分为 3 类：

  • 服务端集成：如 SSR 拼装模板。

    服务端集成的关键在于如何保证各部分模板（各个微前端）能够独立发布，必要的话，甚至可以在服务端也建立一套与前端相对应的结构：
    

    每个子服务负责渲染并服务于对应的微前端，主服务向各个子服务发起请求。

  • 构建时集成：如 Code Splitting

    常见的构建时集成方式是将子应用发布成独立的 npm 包，共同作为主应用的依赖项，构建生成一个供部署的 JS Bundle

    然而，构建时集成最大的问题是会在发布阶段造成耦合，任何一个子应用有变更，都要整个重新编译，意味着