阅读 389

微前端方案小结

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

什么是微前端?

微前端借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分为多个独立的小应用,每个应用独立开发、独立部署、独立运行,然后再将小应用融合为一个完整的应用。减少了项目之间的耦合,提高了扩展性。

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

解决了什么问题?

微前端主要解决了两个问题:

  1. 伴随着项目的迭代,应用变的越来越大,维护成本增高。
  2. 一个项目跨部门、跨团队开发,协作效率低下。

微前端的价值

  1. 拆分庞大的应用为独立的小应用,独立开发,独立部署
  2. 拆分后的独立应用方便增量升级局部回滚
  3. 独立应用之间可以互相通信(类比iframe)、基础库的复用
  4. 旧系统和新系统融合
  5. 各个系统可以使用不同的技术体系

微前端框架汇总

目前社区中已经有很多开源的解决方案。

single-spa

single-spa是一个比较早的微前端框架了。在一个single-spa中,你的 SPA 包含许多被注册的应用,而各个应用可以使用不同的框架。被注册的这些应用维护自己的客户端路由,使用自己需要的框架或者类库。应用只要通过挂载,便可渲染自己的 html 页面,并自由实现功能。

single-spa是将每个应用注册到一个single-spa中,每个应用都只有自己的 **name**、加载应用的函数、激活应用的函数。

singleSpa.registerApplication({
  name: 'myApp',
  app: () => import('src/myApp/main.js'),
  activeWhen: ['/myApp', (location) => location.pathname.startsWith('/some/other/path')],
  customProps: {
    some: 'value',
  },
});
singleSpa.registerApplication({
  name: 'myApp',
  app: () => import('src/myApp/main.js'),
  activeWhen: ['/myApp', (location) => location.pathname.startsWith('/some/other/path')],
  customProps: (name, location) => ({
    some: 'value',
  }),
});
复制代码

详细的请参考:

qiankun

基于 single-spa,具备 js 沙箱、样式隔离、HTML Loader、预加载 等微前端系统所需的能力。qiankun 可以用于任意 js 框架,微应用接入像嵌入一个 iframe

qiankun是**基于路由配置** 和 **手动加载微应用**进行渲染的。

详细参考:

micro-app

micro-app借鉴了WebComponent的思想,通过CustomElement结合自定义的ShadowDom,将微前端封装成一个类WebComponent组件,从而实现微前端的组件化渲染

详细的请参考:

对比

image.png (本图来源于网络)

附: # 京东MicroApp

结语

如果这篇文章帮到了你,欢迎点赞👍和关注⭐️。

文章如有错误之处,希望在评论区指正🙏🙏。

文章引用,如果侵权,请指明进行删除

文章分类
前端
文章标签