什么是微前端?微前端的实现方法

496 阅读3分钟

这是我参与新手入门的第1篇文章

什么是微前端

微前端的理念类似于微服务:将庞大的整体拆成小块,并明确之间的依赖关系。

优势

  1. 松耦合、扩展性好。代码库更小、更内聚、可维护性更高。微前端架构下的代码库倾向于更小、更容易开发。通过界定清晰的应用边界,避免模块间不合理的隐式耦合造成的复杂度上升。
  2. 渐进的升级、更新甚至重写部分前端功能成为可能。新旧代码可以和谐共存。逐步重构时,能保证中间版本的平滑过度和持续交付的新特性。对产品功能进行低风险的局部替换。
  3. 独立部署。缩小变更范围,降低相关风险。

实现方案

关键问题

多个Bundle如何集成 子应用之间怎样隔离影响 公共资源如何复用 子应用之间怎样通信 如何测试 多bundle集成 容器应用+各子应用集

容器应用:

  1. 渲染公共的页面元素,比如header、footer
  2. 解决横切关注点,如身份验证和导航
  3. 将各个微前端整合到一个页面上,并控制微前端的渲染区域和时机

集成方式:

  1. 服务端集成:如SSR拼装模版。关键在于保证各部分模版能够独立发布,每个子服务负责渲染并服务于对应的微前端,主服务向各个子服务发起请求。每个子服务负责渲染并服务于对应的微前端,主服务向各个子服务发起请求
  2. 构建时集成:如Code Splitting。常见的方法是发布成独立的npm包,共同作为主应用的依赖项。最大的问题是会在发布阶段造成耦合,任何一个子应用有变更,都要整个重新编译,意味着对于产品局部的小改动也要发布一个新版本,因此,不推荐这种方式
  3. 运行时集成: iframe、js、Web Components等。iframe。
    1. iframe 无疑是最简单的方式,天然支持样式隔离以及全局变量隔离,但是性能和通信成本较高。而且很难把应用的各个部分联系到一起,路由控制、历史栈管理、深度链接(deep-linking)、响应式布局等都变得异常复杂。
    2. Js:比如前段路由
    3. Web Components。将每个子应用封装成自定义 HTML 元素(而不是前端路由方案中的渲染函数),以获得Shadow DOM带来的样式隔离等好处

资源复用:

建议的做法是前期允许一定程度的冗余,各个 Bundle 在各自的代码库中创建组件,直到形成相对明确的组件 API 时再建立可供复用的公共组件。